getcomputedstyle、currentStyle、style ╰半橙微兮° 2022-06-15 09:42 155阅读 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] 为了简单,我们也可以对获取样式做一个简单的封装: function getStyle(element, attr){ if(element.currentStyle){ return element.currentStyle[attr]; }else{ return window.getComputedStyle(element,null)[attr]; } } console.log(getStyle(test,"cssFloat"));//left console.log(getStyle(test,"float")); //left,早前FF和chrome需要使用cssFloat,不过现在已经不必 console.log(getStyle(test,"stylefloat"));//火狐和谷歌都是undefined console.log(getStyle(test,"styleFloat")); //IE9以下必须使用styleFloat,IE9及以上,支持styleFloat和cssFloat console.log(window.getComputedStyle(test).getPropertyValue("float")) 对于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
还没有评论,来说两句吧...