jQuery CSS() 用于动态创建元素的样式设置

Question

我正在使用jQuery的CSS函数来为一些元素设置样式。

$element.css(style);

这段代码可以运行，但是页面加载后的某些元素是动态创建的。

应该做如下修改：

$element.live ('created',function() {
$(this).css(style);
});

我卡在创建事件上了，有什么想法吗？

- Omar Abid

---

元素是如何创建的？你不能只使用CSS类吗？ - Nick Craver

我曾使用过，并想将其迁移到一个无需类的解决方案。 - Omar Abid

Answer 1

没有为创建的元素提供事件（不是普遍可用的）。您可以：

• 将规则添加到样式表中，以便它们自动应用于新创建的元素

• 在创建元素时链接 css() 方法：

$('<img id="createdImage" src="some.jpg"/>')
    .appendTo(document.body)
    .css(style);

• 动态创建新样式表：

$("<style>").text("#myNewEl { width:20px; height:30px; }").appendTo("head");

- Andy E

---

我曾使用样式表，现在想要做的是摆脱它（少用文件），使用内联CSS。 - Omar Abid

总体而言，内联CSS是一个非常糟糕的主意。将样式放在一个CSS文件中没有任何问题。事实上，这样做是有益的，因为用户只需要下载一次，然后在后续的页面浏览中应该会被缓存。尽管我应该说，当你需要动态地进行它时，内联CSS是可以接受的，例如，你事先不知道元素所需的宽度/高度时。 - DisgruntledGoat

@OmarAbid，你可以在HTML中指定类，这些类可能有CSS定义，也可能没有。Jquery不是基于这些类的定义工作的。 - KBN

Answer 2

最好的方法是定义CSS类。然后根据需要从动态元素中删除和添加类。

$(element).addClass("className");
$(element).removeClass("className");

例子： JS Fiddle

（注：保留原文中的HTML代码，不提供解释）

- Dev Matee

---

抱歉，我刚在combobox（select>option）上尝试了这个操作，但不起作用，这可能是因为“option”没有办法CSS内部嵌套元素的缘故...所以应该正常。 - serge

这仅适用于JQ扫描DOM时存在的元素。所有新元素将不会被扫描，因此，您的解决方案无法工作。 - Alex Khimich

Answer 3

$('head').append('
< style >
.folder { background: url(../icons/Folder_icons/g/f.png) no-repeat left top;} < / style >');

- user2935404