特定の要素のCSSスタイルをプログラムでチェックする方法は？

Question

私は簡単にそれをインラインで適用された場合、要素は持っているものCSSスタイルチェックすることができます。その色を読み取るために

<p style="color: red;">This is red</p> 

JSを：私は場合、要素のCSSスタイルを確認することができますどのように

document.querySelector('p').style.color == 'red' 

そのスタイルは内部または外部スタイルシートから適用されましたか？

Answer 1

window.getComputedStyle()を使用できます。戻り値はCSSStyleDeclarationで、ドット表記を使用してプロパティに直接アクセスするか、.getPropertyValue('property name')を使用します。

var p = document.querySelector('.demo'); 
 
var style = window.getComputedStyle(p); 
 

 
console.log(style); 
 

 
console.log('style.color ', style.color); 
 

 
// or 
 

 
console.log('getPropertyValue(\'color\')', style.getPropertyValue('color'));

.demo { 
 
    color: red; 
 
}

<p class="demo">This is red</p>

Answer 2

最初に一致した要素のプロパティの値を取得するためのjQueryのcssメソッドを使用します。次のコードは、ドキュメントの最初のpタグのcolorプロパティを取得します。特定のタグを選択するには、要素上のIDを使用します。

var color = $("p").css("color");