CSSルールをjQuery経由で将来作成される要素に追加する

Question

私は幾分珍しい問題があります。

$('#selector').css('color','#00f'); 

私の問題は、私は<div id="selector">を作成することである、と私は、上記のコマンドを呼び出して、それが正常に動作します：私はこの何倍ものようなものをやりました。

今度は別のイベントで、後でDOMからその要素を削除し、後で同じIDで再度追加します。この要素は現在color:#00fを持っていません。

CSSでルールを追加する方法はありますか？今後作成されるアイテムには同じような影響があります。id/class？私はjQueryが好きですが、普通のJavaScriptを使ったものであれば問題ありません。

動的でなければならず、CSSファイルに入れるクラスがわかりません。また、私は、アプリケーションの過程を通していくつかの異なる属性を変更する予定です。たとえば、colorをblackに、blueを、redに、そしてに戻します。

---

私は @lucassp からの回答と一緒に行きましたが、これは私がなってしまったものです：

function toggleIcon(elem, classname) 
{ 
    if($(elem).attr('src')=='img/checkbox_checked.gif') 
    { 
     $(elem).attr('src', 'img/checkbox_unchecked.gif') 
     //$('.'+classname).hide();//this was the old line that I removed 
     $('html > head').append($('<style>.'+classname+' { display:none; }</style>')); 
    } 
    else 
    { 
     $(elem).attr('src', 'img/checkbox_checked.gif') 
     //$('.'+classname).show();//this was the old line that I removed 
     $('html > head').append($('<style>.'+classname+' { display:block; }</style>')); 
    } 
} 

私も@Nelsonであると言いたいですおそらく最も正しいとはいえ、いつもうまく動作するアプリケーションコードに入るためにはもっと多くの作業が必要ですが、それは私が現時点で費やしたい努力ではありません。

これを書き直す必要があった場合（または類似のものを書き込む場合）、今後はdetach()を調べます。

Answer 1

これは動作するはずです：：

var style = $('<style>.class { background-color: blue; }</style>'); 
$('html > head').append(style); 

Answer 2

最良のオプションは、クラスを追加することです：

.selected { 
    color : #00f ; 
} 

$('#elemId').addClass('selected') 

Answer 3

あなたが後でそれを再挿入するDOMから要素を削除することを計画した場合、その後、.detach()の代わり.remove()を使用しています。

.detach()を使用すると、後で再挿入するときにCSSが保持されます。ドキュメントから：）

.detach（）メソッドは、（その.detach除き、.remove（）のと同じである は除去要素に関連付けられたすべてのjQueryのデータを保持します。この メソッドは、後で削除された要素が DOMに再挿入される場合に便利です。

Answer 4

livequery pluginを使用できます。

$("#selector").addClass("yourclass"); 

Answer 5

あなたのCSSファイルにCSSルールを作成します。クラスを使用するだけで例：

CSS：

.setcolor { color: #fff; } 

はJavaScript：

$('#selector').addClass('setcolor'); 

必要なときに、それを削除します。ここでは

$('#selector').removeClass('setcolor'); 

Answer 6

あなたは要素を作成している時はいつでも

.yourclass{ 
    color: #00f; 
} 

yourclassを追加

$('#selector').livequery(function() { $(this).css('color', '#00f'); }); 

Answer 7

は、私は私が追加できるようにする前に書いたいくつかのJavaScriptコードで、 CSSの削除と編集：

function CSS(sheet) { 

    if (sheet.constructor.name === 'CSSStyleSheet') 
     this.sheet = sheet; 
    else if (sheet.constructor.name === 'HTMLStyleElement') 
     this.sheet = sheet.sheet; 
    else 
     throw new TypeError(sheet + ' is not a StyleSheet'); 
} 

CSS.prototype = { 
    constructor: CSS, 
    add: function(cssText) { 
     return this.sheet.insertRule(cssText, this.sheet.cssRules.length); 
    }, 
    del: function(index) { 
     return this.sheet.deleteRule(index); 
    }, 
    edit: function(index, cssText) { 
     var i; 
     if(index < 0) 
      index = 0; 
     if(index >= this.sheet.cssRules.length) 
      return this.add(cssText); 
     i = this.sheet.insertRule(cssText, index); 
     if (i === index) 
      this.sheet.deleteRule(i + 1); 
     return i; 
    } 
}; 

また、新しいスタイルシートが必要な場合は、場合

var myCss = new CSS(document.head.appendChild(document.createElement('style'))); 

Answer 8

として構築し、このスタイルのセクションが複数回変更すると仮定し、その後、あなたはhtmlファイルにidを持つスタイルタグを設定することができます。

<style id="myStyleTag"> 
</style> 

、あなたは、JSでそれを参照してください編集またはのようなコンテンツを削除することができます：STYをこのように

var style = $('#myStyleTag'); 
styl.html('.class { background-color: blue; }'); 

あなたがそれを頭に追加するだけでなく、必要に応じて編集するので、あなたがそれを数回変えれば、それは大きくなりません。

Answer 9

この

var style = $('<style>.class { background-color: blue !important; }</style>'); 
$('html > head').append(style); 

Answer 10

を試してみてくださいこれが選ばれた解答と古い質問ですが、目標を達成するために、動的CSSを追加する必要はありませんし、おそらく間違った方向に人を送っています。

jQueryを使用して要素にスタイルを動的に設定する場合は、必要なスタイルに影響を与えるクラスで.addClass()と.removeClass()を使用することをお勧めします。

function toggleIcon(elem, classname) 
    { 
     if($(elem).attr('src')=='img/checkbox_checked.gif') 
    { 
     $(elem).attr('src', 'img/checkbox_unchecked.gif'); 
     $("." + classname).addClass("hidden"); 
    } 
    else 
    { 
     $(elem).attr('src', 'img/checkbox_checked.gif'); 
     $("." + classname).removeClass("hidden"); 
    } 
} 

そしてちょうどあなたのCSSに以下を追加：

.hidden {display: none;} 

これもまた、問題で述べたように、色を変更するに働くだろう：

問題の機能を考えると

.checkbox-red {color: red;} 
.checkbox-blue {color: blue;}