一.获取属性
<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”