一般来讲，如果属性直接在标签html中定义，我们可以 利用elem.style.attribute或是getAttribute来获得属性，但是对于样式属性来说，方法就比较麻烦
获取内联的样式：
<!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title></title> <style type="text/css"> #a{ width: 100px !important;/*即便将最终样式设置成100px,控制太也依旧只能返回内联的样式*/ } </style> </head> <body> <div id="a" style=" 10px;height: 10px;"> 我是邓润桦 </div> <script type="text/javascript"> var e=document.getElementById("a"); var s=e.style.width; console.log(s);//10px </script> </body> </html>
设置内联的样式：
<!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title></title> <style type="text/css"> #a{ width: 100px !important;/*即便将最终样式设置成100px,控制太也依旧只能返回内联的样式*/ } </style> </head> <body> <div id="a" style=" 10px;height: 10px;"> 我是邓润桦 </div> <script type="text/javascript"> var e=document.getElementById("a"); e.style.width="50px";//要以字符串形式赋值 console.log(e.style.width);//50px </script> </body> </html>
获取最终的样式函数，这个函数既可以获取内联样式也可以获取外部样式和内部样式，这取决于最终的样式，也就是同css优先级
思路：
进行三次判断
1.首先先判断这个样式属性是不是就存在与html中，如果是优先获取，直接使用elem[attr]；
2.接着判断是否接受IE的方法来获取样式，IE获取样式的方式是elem.currentStyle[attr]；
3.最后判断是否接受W3C的方法获取CSS属性，这个方法较为繁杂，首先需要将属性名称转换，一般属性名称的命名格式是骆驼命名法，这里需要改为text-align的格式，所以需要使用replace方法修改，然后在利用document.defaultView.getComputedStyle(elem,null).getPropertyValue(attr)获取属性值
*注意，在本函数中，调用对象属性使用的语法是style[attr]而不是style.attr，在传参的时候，只能使用这样的语法。
function attrStyle(elem,attr){ if(elem.attr){ //若样式存在于html中，优先获取 return elem.style[attr];//用于函数传参不能使用style.attr }else if(elem.currentStyle){ //IE下获取CSS属性最终样式(同于CSS优先级) return elem.currentStyle[attr]; }else if(document.defaultView&&document.defaultView.getComputedStyle){ //W3C标准方法获取CSS属性最终样式（同于CSS优先级） //注意此法属性原格式（text-align）获取的，故要转换一下 attr=attr.replace(/[A-Z]/g,'-$1').toLowerCase();//匹配字符串中的大写字母，并把找到的大写字母替换为“-”加该大写字母 return document.defaultView.getComputedStyle(elem,null).getPropertyValue(attr); }else{ return null; } }
*getComputedStyle()这个方法获取的是元素的css样式声明对象，因此要获得该对象的属性值，还需要配合getPropertyValue()
张鑫旭的博客参考：http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/
getAttribute():
<!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title></title> <style type="text/css"> #a{ width: 100px !important; left:100px !important; } </style> </head> <body> <div id="a" style=" 10px;height: 10px; left:200px"> 我是邓润桦 </div> <script type="text/javascript"> var e=document.getElementById("a"); var s=e.getAttribute("left"); console.log(s);//null e.setAttribute("left","400px"); console.log(e.getAttribute("left"));//400px </script> </body> </html>
在这个例子中，getAttribute()方法并不能获取内部样式或是内联样式，它获取的不能是样式属性，而是标签的属性。
目前，就我所知，要修改内部样式和外部样式是不可以的，都是要求修改在html上定义的样式，因此如果使用原生js建议把需要变更的属性，写在html上面。
设置样式属性的另一个方法：setProperty();由于这个方法同样是需要调用style对象，所以他本身也是只能操作内联样式。