通过jQuery为将来创build的元素添加CSS规则

我有一个不寻常的问题。 我做了很多次这样的事情：

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

我的问题是，我创build了一个<div id="selector"> ，我调用上面的命令，它工作正常。

现在，在另一个事件中，稍后，我从DOM中删除该元素，并在稍后使用相同的ID再次添加该元素。 这个元素现在没有color:#00f 。

有没有办法可以在CSS中添加规则，这样会影响将来使用相同id / class创build的项目？ 我喜欢jQuery ，但是任何使用普通JavaScript的东西都可以。

它必须是dynamic的，我不知道放在一个CSS文件的类。 另外，我计划在应用程序的几个不同时间更改一个属性。 例如，将color设置为black ， blue ， red ， black 。

---

我从@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>')); } } 

我也想说， @纳尔逊可能是最“正确的”，虽然它需要更多的工作来进入应用程序代码总是正常工作，这不是我想花费的时刻。

如果将来我不得不重写（或写类似的东西），我会考虑detach() 。

Answer 1

这应该工作：

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

Answer 2

当您计划从DOM中删除元素以便稍后重新插入元素时，请使用.detach（）而不是.remove() 。

稍后重新插入时，使用.detach()将保留您的CSS。 从文档：

.detach（）方法与.remove（）方法相同，不同之处在于.detach（）保留所有与被删除元素相关联的jQuery数据。 这个方法在被删除的元素稍后重新插入DOM时非常有用。

Answer 3

这里是我之前写的一些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 4

如果这个样式部分假设要多次更改，可以在html文件中设置一个id为style的标签：

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

那么你可以参考它与JS，编辑或删除内容，如：

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

通过这种方式，如果您多次更改样式部分，样式部分将不会变大，因为您不只是将其附加到头部，而是根据需要对其进行编辑。

Answer 5

你可以使用livequery插件 。

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

Answer 6

最好的select是添加一个类：

 .selected { color : #00f ; } $('#elemId').addClass('selected') 

Answer 7

在你的CSS文件中创build一个CSS规则

 .yourclass{ color: #00f; } 

每当你创build元素时添加你的类：

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

Answer 8

只需使用一个类，例如：

CSS：

 .setcolor { color: #fff; } 

JavaScript的：

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

然后在需要时删除它：

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

Answer 9

这是一个老select答案的问题，但增加dynamic的CSS来完成目标是没有必要的，并可能导致人们在错误的方向。

如果要使用jQuerydynamic设置元素上的样式，最好使用影响所需样式的类.addClass()和.removeClass() 。

鉴于问题中的function：

 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;} 

Answer 10

尝试这个

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