您的位置：首页 > Web前端 > CSS

兼容的获取样式的函数getStyle()

2015-03-08 00:14 507 查看

想要得到某个元素的某个样式属性，可以用：

<div id="div01" style="color:red">123</div>

var ele = document.getElementById("div01");
console.log(ele.style.color);

但这样只能得到写在元素上的行内样式，对于link进来的样式文件或<style></style>中写的样式是获取不到的。

标准浏览器提供了一个getComputedStyle函数，具体用法是:

// 第一个参数为要获取样式的节点，第二个参数为伪类，如:hover，如果没有就填false或null.返回CSSStyleDeclaration对象；
window.getComputedStyle(element,伪类)

//可以通过属性名来获得需要的样式，下面就得到了元素的字体颜色
window.getComputedStyle(ele,false)["color"];

可IE不支持，但它提供了一个currentStyle对象，得到的结果和getComputedStyle差不多

// IE下通过这种方式也可以得到元素的字体颜色
ele.currentStyle["color"];

综合上面的情况，我们做一下兼容便可以得到靠谱的解决方法！

function getStyle(ele,name){
if (ele.currentStyle) { // IE下的处理
return ele.currentStyle[name];
} else { // 标准浏览器处理
return getComputedStyle(ele, false)[name];
}
}

再去获取div01的样式的时候就很方便了！

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
#div01{font-size:16px;}
</style>
</head>
<body>
<div id="div01" style="color:red">123</div>
<script>
function getStyle(ele,name){
if (ele.currentStyle) {
return ele.currentStyle[name];
} else {
return getComputedStyle(ele, false)[name];
}
}

var ele = document.getElementById("div01");

console.log(getStyle(ele,"color")); // rgb(255, 0, 0)
console.log(getStyle(ele,"fontSize")); // 16px

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航