javascript - $(selector).css() 不工作

Question

我在变量中有一个 html div 元素

var rows = "";
rows += "<div>1111 : Hi there</div>";

我尝试通过以下方式为该 div 添加背景颜色，但一切都失败了。

1.  $(rows).css({'background-color':'#FF0000'});
2.  $(rows).css({'background-color':'#FF0000 !important'});
3.  $(rows).css({backgroundColor:'#FF0000'});
4.  $(rows).css({backgroundColor:'#FF0000 !important'});
5.  $(rows).css('background-color','#FF0000');
6.  $(rows).css('background-color','#FF0000 !important');

7.  $(rows).find('div').css({'background-color':'#FF0000'});
8.  $(rows).find('div').css({'background-color':'#FF0000 !important'});
9.  $(rows).find('div').css({backgroundColor:'#FF0000'});
10. $(rows).find('div').css({backgroundColor:'#FF0000 !important'});
11. $(rows).find('div').css('background-color','#FF0000');
12. $(rows).find('div').css('background-color','#FF0000 !important');

可能是选择器有问题但是得到了

Object[div]来自 console.log($(rows)); 的输出

所以我认为选择器工作正常。

添加css后，这个div附加到其他div上

$("#parentDiv").append(rows);

从 Firebug 检查后

我只有<div id='parentDiv'><div>1111 : Hi There</div></div>这个 div 没有添加 css。

如果我使用内联 css，它工作正常，所以我认为没有 css 可以覆盖颜色

rows += "<div style='background-color:#FF0000'>1111 : Hi there</div>";

jQuery 在其他方面工作得很好。

这段代码有什么问题，任何人都可以帮忙......

谢谢。

Answer 1

元素需要存在于 DOM 中才能应用 css

试试这个:

var rows = "";
rows += "<div>1111 : Hi there</div>";

// new element
var newEl = $("#parentDiv").append(rows);
newEl.find('div').css({'background-color':'#FF0000'});