获取尚未应用的类的 CSS 属性值答案

【问题标题】：Get CSS properties values for a not yet applied class获取尚未应用的类的 CSS 属性值
【发布时间】：2012-03-12 01:49:44
【问题描述】：

在 jQuery 中，我可以使用 css 方法并传递属性名称来获取选择器的 CSS 属性值，例如：

$('#myElement').css('backgroundImage');

我的问题是，如何从一个未尚未应用于 any 元素的类中获取 css 属性值？类似于$('.myClass').css('backgroundImage');，其中选择器返回零个元素，但该类有一个 CSS 声明。

【问题讨论】：

标签： jquery css

【解决方案1】：

您可以在不将其添加到 DOM 的情况下创建临时元素，并检查相关属性。即使元素未添加到 DOM，CSS 也会应用。例如

CSS

p { color: red; }

var p = document.createElement('p');
alert(window.getComputedStyle(p, null).getPropertyValue('color'));

会给你颜色值，但不会向 DOM 添加任何东西。

警告

经过一番研究，我确定此方法仅适用于基于 Gecko 的浏览器，因此不适合通用用途。这种情况may change in future，但如果你今天想要一个跨浏览器的解决方案，我不会依赖这个。

鉴于此，我建议您创建一个临时元素，添加所需的类，将其添加到文档中，检查它以获取样式值，然后将其删除。您还可以应用 display: none 之类的样式，以防止它在作为文档一部分的极其短暂的时间内显示给用户。

【讨论】：

谢谢@Bobby，这是一个不错的解决方案，因为我不必向 DOM 添加元素
这不会在没有控制台的浏览器上触发错误吗？喜欢 IE7/IE8？
我认为这行不通。你需要添加到DOM jsfiddle.net/ruisoftware/tuVhU
@JoseRuiSantos：你说得对，jQuery 代码在“正常”代码中没有按预期工作。我在控制台中对其进行了测试，并认为这已经足够好了——显然不是！但是，普通的 javascript 等价物（显然，不是 exact 等价物）确实工作，因此当然不需要将元素添加到 DOM 以获得样式它的价值。 jQuery 版本不起作用的原因，我不确定 - 要么 $('
') 实际上根本没有创建元素，要么 .css() 工作方式略有不同。
@JoseRuiSantos：...这不是故事的结局：请参阅上面的更新。

【解决方案2】：

简短回答：您无法从未应用于任何元素的类中获取 css 属性。但是，您可以直接从 CSS 样式表中读取它，并且可以使用 DOM CSS

然后可能有类似的东西：

var bgimage = myStyleSheet.cssRules[0].style.background-image;

【讨论】：