获取没有DOM元素的css值

Question

我想知道当DOM中没有元素使用时,是否有办法从样式表文件中获取css值？我正在使用jQuery,我使用selector $(".classname").css()来获取值.但是对于"classname"的情况不在任何元素中,如何获取值"谢谢

Answer 1

只需使用该类名创建一个元素并检查它.您甚至不需要将它附加到DOM:

var $el = $('<div class="classname"></div>');
var opacity = $el.css('opacity') // or whatever 

即使$elDOM实际上不存在,您仍然可以访问其所有样式属性.

编辑:正如评论中所提到的,这种方法并不总是按预期工作(例如, 未明确定义.classname的继承css值,高于.classname的选择器特性等).

例如,由于#foo选择器特性超出了独立选择器的特性,以下操作失败.bar:

CSS:

#foo .bar { color: red; }

JS:

var $el = $('<div class="bar"></div>');
$el.css('color'); // Expected: "red", Actual: ""

Answer 2

请参阅http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript，它提供了一种动态获取和添加CSS的跨浏览器方法。

它适用于document.styleSheetsIE.rules和其他人的.cssRules

它还具有有点抽象的优点，因此您无需担心细节。

上面的链接不再有效。以下是该博客文章的屏幕截图，由互联网档案馆于 2008 年捕获。

该函数基本上迭代所有样式表的所有样式，并提供修改/删除它们的能力。
请注意，不推荐这样做，因为大多数现代样式表太大，无法使其成为有效的操作。