一般来讲,如果属性直接在标签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对象,所以他本身也是只能操作内联样式。