原生js获取元素最终计算结果样式代码

最新推荐文章于 2023-10-30 12:16:12 发布

原创最新推荐文章于 2023-10-30 12:16:12 发布 · 633 阅读

0 ·

CC 4.0 BY-SA版权

web前端同时被 2 个专栏收录

99 篇文章

订阅专栏

javascript

90 篇文章

订阅专栏

本文通过一个简单的HTML页面示例介绍了如何使用JavaScript来获取指定DOM元素的CSS样式属性。示例中定义了基本的HTML结构，并使用内联样式为元素设置样式，最后通过JavaScript函数获取元素的颜色属性。

这里写图片描述

<!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>
        label{display: inline-block;width:200px;height:40px;border:1px solid #ccc;}
        .ob{width:200px;background:#ccc;padding-top:10px;}
        .child{width:100px;height:100px;background:red;}
    </style>
</head>
<body>
    <div class="ob" id="od">
        <ul>
            <li class="o1">1</li>
            <li class="o2">2</li>
            <li class="o3">3</li>
            <li class="o4">4</li>
        </ul>
    </div>
    <script>
        var dom = document.querySelector("#od");
        function getCssValue(elem, property){
            var result = null;
            if(document.defaultView.getComputedStyle){
                result = document.defaultView.getComputedStyle(elem).getPropertyValue(property);
            }else if(elem.currentStyle){
                result = elem.currentStyle[property];
            }
            return result;
        }
        console.log(getCssValue(dom,"color"));
    </script>
</body>
</html>