jquery - 获取尚未应用的类的 CSS 属性值

Question

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

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

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

Answer 1

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

CSS

p { color: red; }

JS

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

将为您提供颜色值，但不会向 DOM 添加任何内容。

警告

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

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