Question

我正在使用javascript向页面中注入一些DOM元素。我能够注入一个DOM元素并对其应用CSS样式：

var $e = $('<div id="header"></div>');
$('body').append($e);

$e.css({
    background: '#fbf7f7',
});

问题：如果我在$e中嵌套了元素，那么如何将CSS样式单独应用于父级及其子级？

var $e = $('<div id="header"><div class="header-content"><span class="title"></span></div></div>');

Answer 1

由于您已将类应用于父元素内的div，因此您只需为该class header-content创建一个样式并应用它。

为了动态应用样式，您可以简单地为单个元素添加类

$('#id-of-element').addClass("header-content");

您还可以在父元素中找到元素，如下面的元素

$e.find('.header-content').css('background-color', '#ccc');

Answer 2

您好，您可以使用.css（）方法将css添加到任何元素...尝试以下示例。我在$ e中添加了一个div并应用了不同的样式......那就是在父div中使用id或类的子...

var $e = $('<div id="header"><div id="child"></div></div>');
$('body').append($e);

$e.css({
    background: '#fbf7f7',
});
$('#child').css("background", "red");

Answer 3

扩展我的评论：如果您需要访问儿童而不管任何ID或类，请使用$e.children()。

将CSS样式添加到注入的DOM元素中

3 个答案: