jquery - head タグの CSS クラスを変更する

Question

次のような head タグに css クラスを追加します。

$("head").append("<style type='text/css'>.classname{color: gold}</style>");

ここで、色属性を金から緑に変更する必要があります。そのための解決策はありますか？

注: head タグでこれを行う必要があります。何かのようなもの

$('.classname').css('color','green');

私の要件に適合しません。ありがとう。

Answer 1

スタイルタグにIDなどの識別子を付けると、後で参照してコンテンツを好きなように変更できます。それが不可能な場合は、コンテンツに基づいてインデックスを作成するなど、別の方法でタグを選択する必要があります。頭など：

$("head").append("<style type='text/css' id='myStyle'>.classname {color: gold}</style>");​​

$("#myStyle").html('.classname {color: green}')

フィドル

編集：

または、スタイルをオーバーライドする必要があるタグの下に新しいスタイルタグを挿入できます。

$("head").append("<style type='text/css'>.classname {color: gold; font-weight: bold}</style>");

$("head").append("<style type='text/css'>.classname {color: green}</style>");

フィドル

または、コンテンツだけを編集して再度挿入することもできます。

$("head").append("<style type='text/css' id='myStyle'>.classname {color: gold; font-weight: bold}</style>");

var css = $("#myStyle").text().replace('gold', 'green');
$("#myStyle").text(css);

フィドル

私の意見では、headセクションにスタイルタグを追加してJavaScriptでCSSを変更することは、javascriptに、element.styleまたはjQueryのcss()バージョンに組み込まれている、はるかに優れた保守性の高いメソッドがすでにある場合、非常に悪い考えです。