Question

如果元素内联应用，我可以轻松检查元素的CSS样式：

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

JS读取那种颜色：

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

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

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-tag的color属性。在元素上使用id来选择特定标记。

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

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

2 个答案: