1

我在变量中有一个 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);

从萤火虫检查后

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

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

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

jQuery 在其他方面运行良好。

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

谢谢。

4

4 回答 4

1

您需要将 $(rows).css 的结果存储到一个变量中，并使用该变量附加到 parentDiv。

var rows = "";
rows += "<div>1111 : Hi there</div>";
var result = $(rows).css("background-color", "red");
$("#parentDiv").append(result);
于 2013-09-24T06:35:18.497 回答
1

你有两个选择。第一的：

var rows = "";
rows += "<div>1111 : Hi there</div>";
// rows only contains a string
rows = $(rows).css({'background-color':'#FF0000'});

现在行将包含新的背景颜色。jQuery 会将字符串转换为扩展的 dom 对象，然后对其使用 .css 函数，但是您必须存储返回值，不会触及原始字符串。

第二种选择：

var rows = $("<div>1111 : Hi there</div>");
// now rows contains a jQuery extended dom object
rows.css({'background-color':'#FF0000'});

现在这个对象上的所有 jQuery 函数都可以工作并且直接操作该对象，不需要存储返回值。

于 2013-09-24T06:37:27.573 回答
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'});
于 2013-09-24T06:32:00.177 回答
1

尝试这个

var rows = $('<div />',{text:"1111 : Hi there"});
rows.css({'background-color':'#FF0000'});

或者

$("#parentDiv").append(rows).find('div').css({'background-color':'#FF0000'});
于 2013-09-24T06:32:50.850 回答