getcomputedstyle、currentStyle、style

╰半橙微兮° 2022-06-15 09:42 148阅读 0赞

style属性：  
在JavaScript中，通过document.getElementById(id).style.XXX只能取到通过内嵌方式设置的样式值，即style属性里面设置的值。

解决方案：引入currentStyle,runtimeStyle,getComputedStyle style 标准的样式,可能是由style属性指定的！  
**runtimeStyle** ：运行时的样式！如果与style的属性重叠，将覆盖style的属性！  
**currentStyle** 指 style 和 runtimeStyle 的结合！ 通过currentStyle就可以获取到通过内联或外部引用的CSS样式的值了（仅限IE） 如：document.getElementById(“test”).currentStyle.top  
要兼容FF，就得需要**getComputedStyle** 出马了  
**getComputedStyle**是一个可以获取当前元素所有最终使用的CSS属性值。

element指JS获取的DOM对象

*  element.style //只能获取内嵌样式
 *  element.currentStyle //IE浏览器获取非内嵌样式
 *  window.getComputedStyle(element,伪类) //非IE浏览器获取非内嵌样式
 *  document.defaultView.getComputedStyle(element,伪类)//非IE浏览器获取非内嵌样式  
    注：Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前，第二个参数“伪类”是必需的（如果不是伪类，设置为null），现在可以省略这个参数。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style> #test{ width:500px; height:300px; background-color:#CCC; float:left; } </style>
    
        <script type = "text/javascript"> window.onload = function(){ var test = document.getElementById("test"); var tag = document.getElementById("tag"); //CSS样式对象:CSS2Properties{},CSSStyleDeclaration console.log(test.style); //火狐返回空对象CSS2Properties{}，谷歌返回空对象CSSStyleDeclaration{} console.log(tag.style); //火狐返回CSS2Properties{width:"500px",height:"300px",background-color:"pink"} //element.style获取的是内嵌式的style，如果不是内嵌式，则是一个空对象 console.log(tag.style.backgroundColor);//pink console.log(tag.style['background-color']);//pink //获取类似background-color,border-radius,padding-left类似样式的两种写法啊 console.log(test.currentStyle);//火狐和谷歌为Undefined,IE返回CSS对象 console.log(window.getComputedStyle(test,null));//谷歌返回CSSStyleDeclaration{……} ，火狐返回CSS2Properties{……} console.log(window.getComputedStyle(test)); //效果同上,但是在Gecko 2.0 (Firefox 4/Thunderbird 3.3/SeaMonkey 2.1) 之前,第二个参数“伪类”是必需的(如果不是伪类,设置为null) // console.log(test.currentStyle.width);//500px(IE) console.log(window.getComputedStyle(test).width); //500px; console.log(window.getComputedStyle(test)['width']);//500px; //document.defaultView.getComputedStyle(element,null)[attr]/window.getComputedStyle(element,null)[attr] } </script>
    </head>
    <body>
    <div id = "test"></div>
    <div id = "tag" style = "width:500px; height:300px;background-color:pink;"></div>
    </body>
    </html>

谷歌：  
![这里写图片描述][SouthEast]  
火狐：  
![这里写图片描述][SouthEast 1]  
为了简单，我们也可以对获取样式做一个简单的封装：

对于float样式，IE中使用的是styleFloat，而早前的FF和chrome使用的是cssFloat，现在FF和Chrome已经支持float  
还有一些其他的属性，不再一一列出，为了不去记忆这些差异点，我们引出两个访问CSS样式对象的方法：  
**getPropertyValue方法和getAttribute方法**  
IE9及其它浏览器（getPropertyValue）

window.getComputedStyle(element, null).getPropertyValue(“float”); 
    element.currentStyle.getPropertyValue(“float”);

getPropertyValue不支持驼峰写法。(兼容IE9及以上，FF,Chrom，Safari,Opera)  
如：

window.getComputedStyle(element,null).getPropertyValue(“background-color”);

对于IE6~8，需要使用getAttribute方法，用于访问CSS样式对象的属性  
element.currentStyle.getAttribute(“float”);//不再需要写成styleFloat

element.currentStyle.getAttribute(“backgroundColor”);//属性名需要写成驼峰写法，否则IE6不支持，如果无视IE6，可以写成”background-color”

[SouthEast]: /images/20220615/7e5558a4d32e487cb2b70e55cf27fb6e.png
[SouthEast 1]: /images/20220615/1a68c478f52c495fbae36a2b408aa71d.png