google-chrome-devtools - コンソールを使用してスタイルを取得する方法

Question

私はdivを持っています

<div class="blue>;

クラス 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);

計算されたスタイルがレンダリング結果であることに注意することが重要です。同じ要素に複数のルールがある場合、適用されたルールのみが表示されます。