设置动态创建的div元素

Question

我想在创建元素后对其应用css样式。该元素由插件创建，因此我无法访问创建它的事件。

此元素具有.appointments-address-field类。我试图添加一个简单的样式：

.appointments-address-field {
    background: #fff;
}

......没有成功。然后我尝试在jQuery中附加委托加载事件：

$(document).on('load', '.appointments-address-field'), function() {
    $('.appointments-address-field').css('background', '#fff');
});

......也没有成功。

如何将样式应用于该元素？

编辑：对不起，我拼错了我的jQuery代码。很多人建议使用.css而不是.style，但我确实使用过。

Answer 1

首先使用CSS而不是代码是正确的，但您的css选择器必须至少与应用于该元素的任何现有背景样式一样特定。我当然假设你的样式已经包含在插件的样式之后。

使用Chrome的F12 DOM检查器之类的工具来查看元素样式的来源以及是否更具体。

e.g。它可能需要像：

.some-parent-wrapper .some-appointment .some-group .appointments-address-field {
    background: #fff;
}

如果您能够提供指向实际网站的链接，则可以很容易地建议正确的选择器。

<强>更新

除非当前选择器也使用，否则不要诉诸!important 的简单回退：http://james.padolsey.com/usability/dont-use-important/

Answer 2

你的第一种方式应该有效，提供：

1. 您将其包含在样式表之后与插件相关的样式表（如果有）。

2. 插件的样式表不使用!important;如果是的话，你可以将它添加到你的风格中。

3. 该插件不直接设置元素的背景;如果是，您可以在样式表中使用!important来赢取。

4. 该插件的规则不是 如果是，请使您的规则更具体。在任何现代浏览器中，您可以右键单击该元素，打开开发工具，并查看应用于它的规则。

与!important打仗风格并非理想。如果插件以这种方式使这很困难，那么当插件添加元素然后运行

时，你可能最好找出触发了什么事件（如果有的话）

$('.appointments-address-field').css('background', '#fff');

...响应的代码。 （> load 不在将元素添加到DOM时触发，这就是为什么它不起作用。）另请注意，函数是css，而不是{ {1}}。

Answer 3

请使用jQuery的.css

$(document).ready(function() {
   $('.appointments-address-field').css({'background':'#fff','border':"#000"});
});

加载插件后，如果您已经包含就绪事件，请在代码中添加此行，请仅在代码下方

$('.appointments-address-field').css({'background':'#fff','border':"#000"});

Answer 4

试

.appointments-address-field {
    background: #fff !important;
}

问题可以是另一种风格指令放不同的背景