style、currentStyle、getComputedStyle（）区别

最新推荐文章于 2022-07-08 10:54:10 发布

澪月

最新推荐文章于 2022-07-08 10:54:10 发布

阅读量855

点赞数

分类专栏： js css 文章标签： javascript css

js 同时被 2 个专栏收录

22 篇文章

订阅专栏

css

4 篇文章

订阅专栏

本文介绍了JavaScript中获取HTML元素样式的三种方法：style、getComputedStyle和currentStyle，并对比了它们的功能差异及适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS 获取 html元素的样式有三种方式：style、getComputedStyle 和 currentStyle等。区别在于：

（1）style 只能获取行间样式，但能设置样式。

（2）getComputedStyle 和 currentStyle 能够获取行间样式/非行间样式/浏览器默认样式，但存在浏览器兼容问题，且不能设置样式。

一、element.style 获取行间样式，以及设置样式

<!DOCTYPE HTML>  
<html lang="zh-cn">  
<head>  
<meta charset="utf-8" />  
<title>Javascript</title>  
<style>  
*{margin: 0;padding: 0;}  
#box{width: 100px;height: 100px;margin-left: 100px;}  
</style>  
</head>  
<body>  
<div id="box" style="background-color:#ccc;margin-top:100px;"></div>  
<script>  
window.onload = function(){   
    var oBox = document.getElementById('box');  
        console.log(oBox.style.width);          //结果为：100px  
    console.log(oBox.style.background); //结果：rgb(204,204,204)，但ie下为空  
    console.log(oBox.style.backgroundColor); //结果：rgb(204,204,204)或#ccc  
    console.log(oBox.style.margin);     //结果为空  
    console.log(oBox.style.marginTop);  //结果：100px  
    oBox.style.height = '120px';        //设置样式  
}  
</script>  
</body>  
</html>

style总结：
（1）对于复合属性（如background），假设行间设置了样式：background-color:#333，不能通过 element.style.background 来获取（见上面例子）。

（2）css属性使用驼峰法，如 backgroundColor、marginTop等。

（3）不同浏览器，一些 css 属性值可能会发生转换，如例子中的 background-color，标准浏览器会转换为 rgb 形式。

二、getComputedStyle 获取css属性值

<!DOCTYPE HTML>  
<html lang="zh-cn">  
<head>  
<meta charset="utf-8" />  
<title>Javascript</title>  
<style>  
#box{width: 100px;height: 100px;margin-left: 100px;}  
</style>  
</head>  
<body>  
<div id="box" style="background-color:#ccc;margin-top:100px;"></div>  
<script>  
window.onload = function(){   
    var oBox = document.getElementById('box');  
    var a = getComputedStyle(oBox, null)['width']; // 100px  
    var b = getComputedStyle(oBox, null).getPropertyValue('backgroundColor'); //chrome为null, ie为空  
    var c = getComputedStyle(oBox, null)['backgroundColor'];// rgb(204,204,204)  
    var d = getComputedStyle(oBox,null)['padding'];// chrome为0px, ie为空  
    console.log(a, b, c, d);  
}  
</script>  
</body>  
</html>

getComputedStyle总结：

（1）标准浏览器，ie9+以上支持 getComputedStyle。

（2）对于复合属性：使用 getPropertyValue 获取属性值时，不能使用驼峰写法，如：例子中的 getpropertyValue(‘backgroundColor’) 无法正确获得值，而必须写成 background-color。

（3）另外，以下写法也正确：getComputedStyle(oBox, null)[‘backgroundColor’]、getComputedStyle(oBox, null)[‘background-color’]，以及 getComputedStyle(oBox, null).backgroundColor 等。

（4）当没有设置某个属性值时，chrome 会读取浏览器该属性的默认值，而 ie9+ 下结果为空。如例子中的 padding。

（5）getComputedStyle 第二个参数为”伪类“，一般用不着，设置为 null 即可。

三、IE 下 currentStyle 获取css 属性值

还是上面的例子：

<script>  
window.onload = function(){   
    var oBox = document.getElementById('box');  
    var a = oBox.currentStyle['width']; // 100px  
    var b = oBox.currentStyle['background-color'];  // #ccc  
    var c = oBox.currentStyle['backgroundColor'];   // #ccc  
    var d = oBox.currentStyle.backgroundColor;     // #ccc  
    //var e = oBox.currentStyle.background-color;  错误  
    var e = oBox.currentStyle['padding'];       // 0px  
    console.log(a, b, c, d, e);  
}  
</script>

currentStyle 总结：

（1）只在 IE 下支持（网上 opera 也支持，但未测）。

（2）注意 ['backgroundColor']、['background-color'] 和 .backgroundColor 等写法。

（3）未设置的属性值，currentStyle 会读取浏览器默认值，如例子中的 padding。

四、不同浏览器下，获取 css 属性值的兼容写法

1.style:各大浏览器都兼容,能设置样式和获取样式,但是获取不了外部样式,如果写了行内没有的样式,返回的是空值
2. currentStyle:该属性只兼容IE,不兼容火狐和谷歌
3. getComputedStyle:该属性是兼容火狐谷歌,不兼容IE
所以综为以下写法

function getStyle(oElement, cssName){  
    return oElement.currentStyle ? oElement.currentStyle[cssName] : getComputedStyle(oElement, null)[cssName];  
}

说明:在IE中获取到的颜色是16进制的,在火狐谷歌中获取的颜色是rgb模式的

参考网址：http://blog.csdn.net/lzding/article/details/46317777