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

样式获取

普通获取属性方式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>