jQuery：将css类的背景图像加载到变量中？

Question

如何将css类中的background-image（url）加载到JavaScript变量中（最好使用jQuery）？

实施例：

.myCssClass { background-image: url(/images/checkered.gif) no-repeat; }

.myCssClass { background-image: url(/images/checkered.gif) no-repeat; }

...现在使用JavaScript将checkered.gif加载到。

Answer 1

你能做到的一种方法就是问jQuery背景图像是什么。如果你没有类myCssClass的任何元素，也许只生成一个，不要将它添加到DOM。

var checkeredGraphic = $('<div class="myCssClass"></div>').css("backgroundImage");

我没有测试过，但如果它不起作用，可能会将它添加到具有较大负边距的正文中，因此它不会在屏幕上呈现。

上面的那行会返回url(/images/checkered.gif)，所以你可以使用正则表达式来清理它：

...css("backgroundImage").replace(/url\(['"]?([^\)'"]+)['"]?\)/, "$1")

另外，你的css定义是错误的。它应该是：

background-image: url(...);
background-repeat: no-repeat;

Answer 2

您可以非常轻松地从JavaScript访问CSS属性。检查一下深入解释：http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript