向注入的 DOM 元素添加 CSS 样式答案

【问题标题】：Adding CSS styles to injected DOM elements向注入的 DOM 元素添加 CSS 样式
【发布时间】：2012-12-04 04:54:21
【问题描述】：

我正在使用 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>');

【问题讨论】：

您不能使用它们的 id 或类访问元素吗？例如 $("#header") 或 $("#header .header-content")
对，我在考虑使用$e，而不是通过它们的类和 id 进行选择，如果类和 id 已在其注入的页面上存在，则可以防止变量名称冲突。如果我按 id 和 classname 选择，可能会有冲突
好吧，如果 id 已经存在，这将是一个主要问题，而不仅仅是 css。这对类名有意义。如果您真的需要孩子，那么只需使用 $e.children()。

标签： javascript jquery html css dom

【解决方案1】：

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

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

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

您还可以在父元素中找到元素，如下所示

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

【讨论】：

【解决方案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");

【讨论】：

【解决方案3】：

扩展我的 cmets：如果您需要访问孩子而不考虑任何 id 或类，那么只需使用 $e.children()。

【讨论】：