js操作获取dom元素的样式属性值
obj.style
: 它只能够获取通过style设置的元素CSS属性值:
- 在
html标签内通过style设置行内属性
- 通过
.dom.style.width="100px"
这样类似设置。
无法获取定义在<style type="text/css">
里面的属性,这时getComputedStyle()
就可以发挥作用了 ,它可以获取到指定元素对应css属性的最终计算值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type=”text/css”>
.ss{color:#cdcdcd;}
</style>
</head>
<body>
<div id='css88' class='ss' style='width:200px; height:200px; background:#333333'>JS获取CSS属性值</div>
<script type=”text/javascript”>
alert(document.getElementById(“css88″).style.width);//200px
alert(document.getElementById(“css88″).style.color);//null
</script>
</body>
</html>
window.getComputedStyle(dom元素,【伪类】)
,不兼容IE浏览器(obj.currentStyle)。
window.getComputedStyle(el)等价于 document.defaultView.getComputedStyle(el)
“DOM2级样式”增强了document.defaultView,提供了getComputedStyle()方法。这个方法接受两个参数:要取得计算样式的DOM元素和一个伪元素字符串(例如“:after”)。如果不需要伪元素信息,第二个参数可以是null。getComputerStyle()方法返回一个实时的CSSStyleDeclaration对象,包含当前元素的所有计算的样式。当元素的样式更改时,它会自动更新本身。
<!DOCTYPE html>
<html lang="en">
<head>
<title>计算元素样式</title>
<style>
#myDiv {
width:100px;
height:200px;
}
</style>
<body>
<div id ="myDiv" style=" border:1px solid black"></div>
<script>
var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
alert(computedStyle.backgroundColor); //"red"
alert(computedStyle.width); //"100px"
alert(computedStyle.height); //"200px"
alert(computedStyle.border); //在某些浏览器中是“1px solid black”
</script>
</body>
</head>
</html></span>
下面这个函数,能够获取一个元素的任意 CSS 属性值。
function getStyle(element,attr){
if(element.currentStyle){
return element.currentStyle[attr]
}else{
return getComputedStyle(element).attr
}
}