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