脚本化css

一.获取属性

< div style= "width: 100px; height: 100px; background-color:red;" ></ div >

< script type= "text/javascript" >

var div= document. getElementsByTagName( "div")[ 0];

< / script >

但是这样只能读和写行间样式表，如果单独创建一个css文件就读不到了

二.查询计算

这样获取的是最终的属性，而不是只是获取行间样式表种的属性

这个只能是读取，不能通过这个方法改变属性值

这个方法只有IE浏览器存在，但是我们通过封装方法可以解决兼容性问题：

var div= document. getElementsByTagName( "div")[ 0];

var getStyle= function( elem, prop){

if( window. getComputedStyle( elem, null)){ //elem是标签，prop是属性

return window. getComputedStyle( elem, null)[ prop];

} else{

return elem. currentStyle[ prop];

}

}

这样就可以获取属性了

另外

getcomputedStyle(elem,null)里面的null就是获取伪元素的，就像这样子：

div::before{

width: 50px;

height: 45px;

background-color: aqua;

display: inline-block;

}

var div= document. getElementsByTagName( "div")[ 0];

这样就能读取伪元素里面的属性值，但是不能改变这个值

小实验：

这个例子实现了小方块自动向右移动的方法

< div style= "width: 100px; height: 100px; background-color:red;position: absolute;left: 0px;" ></ div >

< script type= "text/javascript" >

var div= document. getElementsByTagName( "div")[ 0];

//封装getstyle（）方法

var getStyle= function( elem, prop){

if( window. getComputedStyle( elem, null)){

return window. getComputedStyle( elem, null)[ prop];

} else{

return elem. currentStyle[ prop];

}

}

setInterval( function(){

div. style. left= parseInt( getStyle( div, "left"))+ 1+ "px";

}, 100);

< / script >

提醒一下，因为:

因为这个输出是带有px的，所以我们要用parseInt（）方法去掉“px”