如何使用控制台获取样式

Question

我有一个div

<div class="blue>;

班级蓝色是：

    .blue {
          background-color: blue;
    }

现在我知道我可以使用以下方法在控制台中设置div的背景颜色：

      $0.style.backgroundColor = "#ffcc00"

但是如果我想使用控制台获取该元素的背景颜色值呢？

Answer 1

你可以这样做：

var blue = document.getElementsByClassName('blue')[0];

blue.style.getPropertyCSSValue('background-color');

或者你这样做：

blue.style.getPropertyValue('background-color');

Answer 2

您可能想要计算样式：

var style = getComputedStyle(document.body, null); // Gets the style for a passed element and optional pseudo selecter (eg. :hover)
console.log(style.backgroundColor);

重要的是要注意计算的样式是渲染的结果。如果您对同一元素有多个规则，则只显示已应用的规则。