JavaScript获取CSS内联样式和外联样式

最新推荐文章于 2022-08-12 13:38:36 发布

LaoYe - IT

最新推荐文章于 2022-08-12 13:38:36 发布

阅读量2.2k

点赞数

分类专栏：前端文章标签： JavaScript CSS getComputedStyle currentStyle

本文链接：https://blog.csdn.net/rao_limon/article/details/90056645

版权

前端专栏收录该内容

73 篇文章 3 订阅

订阅专栏

DOM标准里有个全局方法getComputedStyle，可以获取到当前对象样式规则信息，如：getComputedStyle(obj,null).paddingLeft，就能获取到对象的左内边距。但是IE不支持此方法，它有自己的一个实现方式，那就是currentStyle，不同于全局方法getComputedStyle，它是作为DOM元素属性存在的，如：obj.currentStyle.paddingLeft，在IE中就获取到对象的左内边距了，兼容性的写法如下：

return window.getComputedStyle ? window.getComputedStyle(obj,null).paddingLeft : obj.currentStyle.paddingLeft;

案例代码如下所示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>原生JS实现jQuery淡入淡出效果</title>
        <style type="text/css">
            #testBox {
                width: 175px;
                height: 175px;
                background-color: #009E94;
                opacity: 0.5;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                var testBox = document.getElementById("testBox");
                var opacity = window.getComputedStyle ? window.getComputedStyle(testBox,null).opacity : testBox.currentStyle.opacity;
                console.log(opacity)
            }
        </script>
    </head>
    <body>
        <div id="testBox"></div>
    </body>
</html>

我们将其封装，封装好的代码如下所示。

window.onload = function() {
    var testBox = document.getElementById("testBox");
    var opacity = getStyle(testBox,"opacity");
    console.log(opacity)
}
function getStyle(obj, prop) {
    if(window.getComputedStyle) {
        return window.getComputedStyle(obj,null)[prop];
    } else if(obj.currentStyle) {
        return obj.currentStyle[prop];
    }
    return null;
}

总结：基于IE浏览器的非行内获取法：使用 obj.currentStyle["attr"]；基于非IE浏览器，如火狐谷歌等非行内获取法：使用window.getComputedStyle(obj)["attr"]

切记：非行内样式获取法，只能获取不能设置。