如何以编程方式检查特定元素的 CSS 样式？ [复制]答案

【问题标题】：How to programmatically check CSS styles for particular elements? [duplicate]如何以编程方式检查特定元素的 CSS 样式？ [复制]
【发布时间】：2017-05-06 02:29:46
【问题描述】：

如果一个元素是内联应用的，我可以很容易地检查它的 CSS 样式：

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

读取该颜色的 JS：

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

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

【问题讨论】：

window.getComputedStyle
为什么要这样做？尝试这样做通常是一种代码味道。这表明您可能正在尝试使用 CSS 样式作为维护程序状态的一种方式，这通常不是一个好主意。明智地使用类并添加和删除它们通常会使尝试查询当前样式变得不必要。

标签： javascript css inline-styles

【解决方案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; 
}

&lt;p class="demo"&gt;This is red&lt;/p&gt;

【讨论】：

【解决方案2】：

使用 jQuery css 方法获取第一个匹配元素的属性值。以下代码将获取文档中第一个 p-tag 的颜色属性。使用元素上的 id 来选择特定标签。

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

【讨论】：

我们不再使用 jQuery。