访问节点样式

最新推荐文章于 2024-01-29 20:45:26 发布

路人葵

最新推荐文章于 2024-01-29 20:45:26 发布

阅读量128

点赞数

分类专栏：代码前端 javascript 文章标签： javascript 访问节点样式

本文链接：https://blog.csdn.net/weixin_41218855/article/details/90084632

版权

前端同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

代码

16 篇文章 0 订阅

订阅专栏

javascript

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问节点样式</title>
    <style>
        #parent {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
    </style>
    <script>
        window.onload = function () {
            var oParent = $('parent');
            console.log(getStyle(oParent,'borderColor'))
            function $(id) {
                return document.getElementById(id);
            }
            //获取节点样式
            function getStyle(obj, sAttr) {
                if(obj.currentStyle){
                    return obj.currentStyle[sAttr];
                } else {
                    return getComputedStyle(obj,null)[sAttr];
                }
            }
        }
    </script>
</head>
<body>
    <div id="parent"></div>
</body>
</html>