JS——样式获取的兼容写法

最新推荐文章于 2022-09-29 23:20:49 发布

weixin_30418341

最新推荐文章于 2022-09-29 23:20:49 发布

阅读量177

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wuqiuxue/p/7988485.html

版权

样式获取

普通获取属性方式div.style.width或者div.style["width"]无法获取内嵌和外链式，只能获取行内式

window.getComputedStyle(div, null)

返回元素的长宽等带有单位px
第二个参数是伪类，没有填null

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div {
        width: 400px;
        height: 500px;
        background-color: black;
        margin-left: 500px;
        position: relative;
    }

    div:after {
        content: "";
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: pink;
        top: 50px;
        left: 100px;
    }
    </style>
</head>

<body>
    <div></div>
    <script type="text/javascript">
    var div = document.getElementsByTagName("div")[0];
    console.log(typeof window.getComputedStyle(div, null)); //object
    console.log(window.getComputedStyle(div,':after')['width']);//50px
    console.log(window.getComputedStyle(div, null).width); //400px
    console.log(window.getComputedStyle(div, null)["width"]); //400px
    console.log(window.getComputedStyle(div, null)["background-color"]); //rgb(255, 192, 203)
    console.log(window.getComputedStyle(div, null).backgroundColor); //rgb(255, 192, 203)
    </script>
</body>
</html>

div.currentStyle（IE678）

<script>
    var div = document.getElementsByTagName("div")[0];
    console.log(div.currentStyle["width"]);
    console.log(div.currentStyle.width);
</script>

兼容写法

<script>
    var div = document.getElementsByTagName("div")[0];
    console.log(getStyle(div, "width"));
    console.log(getStyle(div, "backgroundColor"));

    function getStyle(ele, attr) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(ele, null)[attr];
        }
        return ele.currentStyle[attr];
    }
</script>

转载于:https://www.cnblogs.com/wuqiuxue/p/7988485.html

weixin_30418341

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS——样式获取的兼容写法

样式获取普通获取属性方式div.style.width或者div.style["width"]无法获取内嵌和外链式，只能获取行内式window.getComputedStyle(div, null)返回元素的长宽等带有单位px第二个参数是伪类，没有填null<!DOCTYPE html><html lang="en">&l...
复制链接

扫一扫