google-chrome-devtools - 如何使用控制台获取样式

Question

我有一个 div

<div class="blue>;

蓝色类是：

    .blue {
          background-color: blue;
    }

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

      $0.style.backgroundColor = "#ffcc00"

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

Answer 1

您可能需要计算样式：

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

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

Answer 2

你可以做 ：

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

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

或者你这样做：

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