Question

如何将CSS添加到已动态创建的元素中？

以下是我想要做的一个简单示例：

$(document).ready(function() { 
    $('#container').html('<p id="hello">hello world</p>');
    // The following line doesn't work. 
    $('#hello').css("background-color", "#FFF");
});

我想要这样做的原因，我想不出另一种方法，就是我想在动态生成的表的备用行上使用背景颜色：

$("#results-table tr:even").css("background-color", "#FFF");

我需要专门为IE8及以下版本使用这一行jQuery，它不支持nth-child CSS选择器。

Answer 1

实际上，您的代码确实有效。您可能想要检查该ID是否没有多个元素。

修改这是您的代码，没有重复的ID：http://jsfiddle.net/FhTU7/

最终修改 您的HTML背景和元素背景都是白色的。

Answer 2

您可以代替直接设置CSS，而只需将类添加到偶数行

$("#results-table tr:even").addClass("alt");

CSS用于设置行颜色，然后为备用行设置不同的颜色集

<style type="text/css">
tr
{
    background: #fff;
    color: #000;
}

tr.alt
{
    background: #000;
    color: #fff;
}
</style>

Answer 3

您可以将新元素声明为变量...

$(document).ready(function() { 
    var $new = $('<p id="hello">hello world</p>');
    $new.css({
        backgroundColor: "#fff"
    })
    $('#container').append($new);
});

您可以使用appendTo ...

$(document).ready(function() { 
    $('<p id="hello">hello world</p>').appendTo('#container').css({
        backgroundColor: "#fff"
    })
});

但是，如果您正确创建元素，那么您可以在最后使用原始CSS ...

    $('#container').append('<p id="hello">hello world</p>');

jQuery：相当于CSS的.live（）？

3 个答案: