javascript - 如何使用 JavaScript 或 jQuery 将样式表中 CSS 类的属性直接加载到散列中？

Question

我想将 CSS 样式表中类或 ID 的键值对加载到 JavaScript 对象中，以便访问数据。

请注意，我不想将该类添加到 DOM 元素(至少不是直接添加)

我在 JQuery 中看到的唯一方法是创建一个虚拟隐藏元素，使用以下方法将我的类添加到它

$(“#dummy").addClass(“myclass”);

然后使用

查询

$(“#dummy”).(cssproperty);

但即使在那里，我也想查看每个 css 属性，但事先不知道它们是什么。

我真正需要的是将 CSS 类加载到散列中的简单方法。 我在 jQuery 中没有看到......常规 JavaScript 中有什么东西吗？

谢谢 --罗布

Answer 1

两种选择:

1) 样式表对象

...讨论 here和 here .这使您可以直接访问类定义，您可以从中直接读取样式属性并将它们应用到您的 DOM 元素。

遗憾的是，我现在没有时间快速给出一个例子，但上面的链接有它们。基本上，您循环遍历样式表 (document.styleSheets)，对于每个样式表，循环遍历 cssRules(某些浏览器上的 rules)。每个规则都有一个 selectorText 告诉您它的选择器是什么样的(“.foo”或其他)。当您找到选择器与您的类匹配的规则时，您可以使用 for (name in rule.style) 遍历其 style 属性的属性，值为rule.style[name] 在循环内。

2) getComputedStyle:

照你说的做，将类应用于页外元素，然后使用getComputedStyle(MDC，MSDN)函数获取样式 computed 风格的对象。但是要小心，因为计算样式可能具有继承的元素(例如，从应用于 body 甚至 html 的所有子级的样式)。