javascript - 向注入的 DOM 元素添加 CSS 样式

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().