多种浏览器下获取css样式

最新推荐文章于 2021-11-21 23:03:08 发布

行走的老熊

最新推荐文章于 2021-11-21 23:03:08 发布

阅读量570

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Javaer_dog/article/details/83120035

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1，我们知道用

            var temDiv = document.getElementById("div1");
            alert(temDiv.style.width)

可以获取行间样式。这个在任何浏览器下都可以使用。

2，但是非行间样式怎么获取呢？经过测试，如果样式在样式表获取外部样式表中，上面的方法将不会生效。而且，样式表中样式的获取对于不同浏览器，获取方式也不一样。这一点需要我们注意。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:200px;
        }
    </style>
</head>
<body>
    <div id="div1">wo shishui</div>
    <script>
        function get(){
            var temDiv = document.getElementById("div1");
            alert(temDiv.style.width)
            //alert(getComputedStyle(temDiv,false).width)
            
            //IE浏览器
            if(temDiv.currentStyle){
                alert(temDiv.currentStyle.width);
            }else{ //其他浏览器
                alert(getComputedStyle(temDiv,false).width);
            }
        }
        get();
    </script>
    
</body>
</html>

3，总结：

行间样式，对于不同浏览器获取方式一致。
非行间样式，对于不同浏览器获取方式不一致，需要注意。同时，对于不同浏览器的不兼容问题，99%的问题可以用if else解决。

4，上面这种取非行间样式的方式有一定限制，只能取单一样式，不能取复合样式。
单一样式：height、width、position

复合样式：background、border

想这种：obj.currentStyle.width可以正常获取值，但是obj.currentStyle.background获取不到值，但是用obj.currentStyle.backgourdColor可以正常取值。

行走的老熊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多种浏览器下获取css样式

1，我们知道用 var temDiv = document.getElementById("div1"); alert(temDiv.style.width) 可以获取行间样式。这个在任何浏览器下都可以使用。2，但是非行间样式怎么获取呢？经过测试，如果样式在样式表获取外部样式表中，上面的方法将不会生效。而且，样式表中样式的获取对于不同浏览...
复制链接

扫一扫