js获取css样式

钢铁加lulu

已于 2022-08-15 11:57:23 修改

阅读量4.6k

点赞数 2

分类专栏： css js 文章标签： js获取样式

于 2019-03-11 11:53:21 首次发布

本文链接：https://blog.youkuaiyun.com/u011295864/article/details/88391047

版权

js 同时被 2 个专栏收录

24 篇文章

订阅专栏

css

8 篇文章

订阅专栏

情况分为两种：第一种行内样式第二种其他样式

一、行内样式获取比较简单，一般通过element.style.attr即可获取样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var dom = document.getElementById('demo')
        console.log(dom.style.width) // 300px
    </script>
</head>
<body>
    <div id="demo" style="width: 300px;height: 500px;color: red;"></div>
</body>
</html>

二、其他样式。这里以class样式为例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo {
            width: 300px;
            height: 500px;
            color: red;
        }
    </style>
    <script>
        var dom = document.getElementsByClassName('demo')
        let style = null
        // IE浏览器下写法
        style = dom.currentStyle['width']
        // 非IE浏览器（如谷歌、oprea）下写法
        style = getComputedStyle(dom, null)['width']
        // 通过三元运算实现 兼容IE和非IE浏览器写法
        style = dom.currentStyle ? dom.currentStyle['width'] : getComputedStyle(dom, null)['width']
        if (style === 'auto') {
            // 如果是span标签，获取到的宽度为'auto'
            if (dom.getBoundingClientRect()) {
              style = dom.getBoundingClientRect().width
            }
        }
    </script>
</head>
<body>
    <div class="demo"></div>
</body>
</html>

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