Javascript如何用一个优雅的姿势通过getStyle函数来获取元素的样式

最新推荐文章于 2022-04-28 09:06:05 发布

coder_chenz

最新推荐文章于 2022-04-28 09:06:05 发布

阅读量7.3k

点赞数 3

分类专栏： Javacript 文章标签： javascript

本文链接：https://blog.csdn.net/coder_chenz/article/details/51979197

版权

Javacript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

`Javascript如何用一个优雅的姿势通过getStyle函数来获取元素的样式“
想要得到某个元素的某个样式属性，可以用：

1.<div id="div1" style="width: 200px;"></div>

2<script>
        var oDiv=document.getElementById('div1');
        console.log(oDiv.style.width);
    </script>

但这样只能得到写在元素上的行内样式，对于link进来的外部样式文件或中写的样式是获取不到的。而在一个设计良好的网页文件里，
样式表一般是与文档结构分离开来以外部文件存在的。所以，仅仅用元素的style不能如意地获取元素CSS样式！
既然style的方式不是那么完美，那么该用什么方法来获取元素的CSS样式呢？？
我们能用到的样式一定存在解决的办法，只不过存在一些需要我们处理的兼容问题，
各浏览器都会存在一些差异，Firefox、webkit(Chrome,Safari)支持W3C标准的方法：getComputedStyle()，而IE6/7/8不支持标准的方法但是有私有的属性来实现：currentStyle，而IE9及以上和Opera两个都支持。
但是有了这2个方法和属性的结合基本上可以满足大多数要求了。
首先我们来看一下DOM提供的一个 getComputedStyle() 方法获取给定元素的样式表；
getComputedStyle()获得的是计算后的值。
第一个参数为需要获取样式的元素对象；第二个参数为伪元素，如:hover, :first-letter, :before等等，
如果不需要伪元素则该参数为null或者false。getComputedStyle()函数可以从 document.defaultView 对象中访问到
代码如下

1.<div id="div1"></div>
    2.<style>#div1{width: 200px;height: 200px;background-color: red;}</style>
    3<script>
        var oDiv=document.getElementById('div1');
            console.log(getComputedStyle(oDiv).width);
         </script>

可IE6，IE7，IE8不支持但是IE除了提供 style 属性之外，还有一个 currentStyle 属性currentStyle 的用法和 style 的用法一样，
然而不同的是，currentStyle 如名字所示获取到的是 element 元素当前(所有的)样式代码如下：

        var oDiv=document.getElementById('div1');
        console.log(oDiv.currentStyle .width);

好了，在 IE 下我们已经解决了获取外部样式的问题.你以为这就结束了吗？？

！！！这样做虽然能获得元素的样式，但是也存在问题比如在javascript中“-”(中划线或连字符)代表的是减号，而在CSS中，许多样式属性都有这个符号，如background-color、font-size等，
最后发现不仅IE（日志: 16px）火狐（16px）都能自动的转换过来。

然而并没有还存在这样的问题float，float在javascript中属于保留字，在javascript中设置或获取元素的float的值，都有其他的代替写法，在标准浏览器中为cssFloat，而在IE6/7/8中为styleFloat

解决办法如下

if(oDiv.style.styleFloat){
            return oDiv.style.styleFloat;   //ie
        }else if(oDiv.style.cssFloat){
            return oDiv.style.cssFloat;     //火狐
        }

在具体使用的时候还发现兼容问题透明度filter:alpha(opacity=60)与opacity=0.6（IE）具体解决办法如下：
当需要做兼容的时候，两个都要写filter:alpha(opacity=60)与opacity=0.6（IE），这样火狐等浏览器会获得opacity=0.6；
在不完全放弃IE的情况下就要另外转换了；
最终代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        #div1{font-size:16px;
            width: 200px;
            height: 200px;
            background-color: #0FB2D4;
            float: right;
            opacity: 0.5;
            filter: alpha(opacity:50);
        }
    </style>
</head>
<body>
<div id="div1" style="color:red">123</div>
<script>
    var oDiv= document.getElementById("div1");
    function getStyle(ele,name){
        if(oDiv.style.styleFloat){
            return oDiv.style.styleFloat;   //ie下float处理
        }else if(oDiv.style.cssFloat){
            return oDiv.style.cssFloat;     //火狐等float处理
        }
        if (oDiv.currentStyle) {
            return oDiv.currentStyle[name];
        } else {
            return getComputedStyle(oDiv, false)[name];
        }
    }
    console.log(getStyle(oDiv,"width"));
    console.log(getStyle(oDiv,"opacity"));
    console.log(getStyle(oDiv,"float"));
    console.log(getStyle(oDiv,"backgroundColor"));
</script>
</body>
</html>