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

我有一个div

<div class="blue>;

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

      $0.style.backgroundColor = "#ffcc00"

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

您可以执行以下操作：

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

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

或者你会：

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

---

您可能需要计算样式：

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

---

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

我希望您注意到控制台执行javascript，没有特殊的命令语法

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