如何获取元素样式

最新推荐文章于 2024-05-08 14:55:24 发布

ball球

最新推荐文章于 2024-05-08 14:55:24 发布

阅读量2.1k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qmhball/article/details/8660119

版权

web前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

元素的style属性时常被用于获取元素样式，但很多时候它是不奏效的。看下面的代码：

<html>
<body>
    <style>
        #ex2 {height:100px;width:100px;background:blue;}
    </style>
    <div style="height:100px;width:100px;background:green;" id='ex1'></div>
    <div id='ex2'></div>
    <script>
        var elem1 = document.getElementById('ex1');
        alert(elem1.style.width);
        var elem2 = document.getElementById('ex2');
        alert(elem2.style.width);
    </script>
</body>
</html>

我们发现，elem1 的值是可以取到的（ 100px ），但 elem2 则是空。这是因为， style 属性只能获取内联样式。那么对于非内联样式我们应该如何取得其值呢？微软和 W3C 都提供了解决方案。

微软方案
使用currentStyle属性，它的工作方式很像style属性，但你不能通过它设置样式。
例如:

var x = document.getElementById(‘test’);
alert(x.currentStyle.color);

W3C方案
使用window.getComputedStyle() 方法，这个方法的使用略复杂。
例如：

var x = document.getElementById(‘test’);
alert(window.getComputedStyle(x, null).color);

整合两种解决方案，我们给出函数

function getRealStyle(elem, styleName){
    var realStyle = null;
    //微软
    if (elem.currentStyle){
        realStyle = elem.currentStyle[styleName];
    }
    //W3C
    else if (window.getComputedStyle){
        realStyle = window.getComputedStyle(elem, null)[styleName];
    }
    return realStyle;
}

使用这个函数，我们可以得到 elem2 的正确值 100px 。

代码如下：

var elem2 = document.getElementById('ex2');
alert(getRealStyle(elem2, 'width'));

注：
getComputedStyle()总是返回一个像素值（**px），即使我们在css中定义是样式是11%或是50em。

参考:《ppk谈javascript》第9章 CSS修改 A style属性

ball球

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何获取元素样式

元素的style属性时常被用于获取元素样式，但很多时候它是不奏效的。看下面的代码： #ex2 {height:100px;width:100px;background:blue;} var elem1 = document.getElementById('ex1'); alert(elem1.s
复制链接

扫一扫