如何以编程方式检查特定元素的 CSS 样式？

Question

我可以很容易地检查 CSS 内联应用的元素的样式：

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

读取那个颜色的JS：

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

如果某个元素的 CSS 样式是从内部或外部样式表应用的，我如何检查该元素的样式？

Answer 1

您可以使用window.getComputedStyle(). The returned value is a 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-tag 获取颜色属性。使用元素上的 id select 特定标签。

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

如何以编程方式检查特定元素的 CSS 样式？

How to programmatically check CSS styles for particular elements?

javascript

css

inline-styles