getcomputedstyle、currentStyle、style

最新推荐文章于 2022-06-16 17:33:03 发布

swpu_lwf

最新推荐文章于 2022-06-16 17:33:03 发布

阅读量387

点赞数

分类专栏： JavaScript 文章标签： javascript 样式

本文链接：https://blog.csdn.net/liwenfei123/article/details/72811957

版权

JavaScript 专栏收录该内容

62 篇文章 2 订阅

订阅专栏

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>

谷歌：
这里写图片描述
火狐：

为了简单，我们也可以对获取样式做一个简单的封装：

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”

swpu_lwf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录