Question

为什么我看不到自己的风格？

    <style>
        .style{
            background-color: pink;
            top: 50px;
            left: 50px;
        }
    </style>
    <script>
        window.onload = function () {
            console.log(document.querySelector('.style').style.backgroundColor);
        }
    </script>
    </head>
    <body><div class="style">A</div></body>

JS无法看到带样式的块的接缝。

Answer 1

那不是element.style的工作方式。 el.style仅取自元素的样式属性，因此只有backgroundColor才会看到style="background-color: red"。

您想要window.getComputedStyle()：

var el = document.querySelector('.style');
var bg = getComputedStyle(el).backgroundColor;

您可以在控制台中尝试此页面：

getComputedStyle(document.querySelector('pre')).backgroundColor

速度：

el = document.querySelector('pre');
console.time('getComputedStyle');
for (i=0; i<1000; i++) c = getComputedStyle(el).backgroundColor;
console.timeEnd('getComputedStyle');

返回：

getComputedStyle: 9.120ms

60帧/秒的帧速率为16毫秒，因此每帧可以做到2000 getComputedStyle秒。

JavaScript没有看到backgroundColor？

1 个答案: