如何将css应用于使用append（）创建的元素

Question

我正在尝试更改某些选项的文字颜色，但它不起作用。没有红色

    var style="color:red" 
    $('#newuserSelect')
        .append($('<option>', {
                value: "0",
                title: "hello",
                style: style
            })
            .text("my text"));

http://jsfiddle.net/ZDYEd/颜色应为红色时为黑色

Answer 1

要使用的属性名称是“css”，而不是“style”。该值也应该是一个对象，其属性是要设置的CSS属性。

$('#newuserSelect')
    .append($('<option>', {
            value: "0",
            title: "hello",
            css: { color: "red" }
        })
        .text("my text"));

您也可以使用该初始化对象顺便设置文本：

$('#newuserSelect')
    .append($('<option>', {
            value: "0",
            title: "hello",
            css: { color: "red" },
            text: "my text"
        })
    );

现在，this does work，但重要的是要注意，当您查看<select>元素未打开的页面时，您不会看<option>元素。如果您希望所选文本为红色，则还需要设置<select>元素的样式。当只有一个<option>时，<select>无法“打开”，因此您永远不会看到<option>的样式。

我不记得确切，但可能是IE或其旧版本无法关注<option>元素上的样式。 IE <select>在旧版本中以非常奇怪的方式实现。

Answer 2

实际上，$(xyz).append(abc)会返回xyz而不是abc的对象。顺便说一下，为元素设置css的正确方法是使用.css()函数。请阅读here以获取完整参考。

所以我建议你在当前的环境中使用.appendTo。这符合你的需要。与.append()不同，.appendTo()将返回xyz的对象[$(xyz).appendTo(abc)]

试试这个，

$('<option>', { value: "0", title: "hello" })
.appendTo('#newuserSelect')
.text('my text')
.css({color:'red'});

DEMO

Answer 3

为什么要调用jQuery创建这么小的HTML？

$('#newuserSelect').append(
    '<option value="0" title="hello" style="color:red">my text</option>'
);

Answer 4

你的JavaScript很好。您无法使用CSS为单个选项着色。这是你原来小提琴的输出！

编辑： CSS文本颜色在Chrome 31 for OSX Mavericks中未生效