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

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

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

我的问题是我创建了一个

，我调用了上面的命令，它工作正常

现在，在另一个事件中，稍后，我从中删除该元素，并在稍后使用相同的id再次添加它。该元素现在没有

颜色：#00f

是否有一种方法可以在CSS中添加规则，这样它将影响将来使用相同的

id

/

类创建的项目？我喜欢，但是任何带有纯JavaScript的东西都可以

它必须是动态的，而且我不知道要放入CSS文件中的类。此外，我还计划在应用过程中多次更改单个属性。例如，将
颜色设置为
黑色
、蓝色
、红色

、黑色

---

我接受了来自@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>'));
    }
}

函数切换图标（元素，类名）
{
if（$（elem.attr（'src'）=='img/checkbox\u checked.gif'））
{
$（elem.attr（'src'，'img/checkbox\u unchecked.gif'））
//$（'..+classname）.hide（）；//这是我删除的旧行
$（'html>head'）.append（$（'.+classname+'{display:none；}'）；
}
其他的
{
$（elem.attr（'src'，'img/checkbox\u checked.gif'））
//$（'..+classname）.show（）；//这是我删除的旧行
$（'html>head'）.append（$（'.+classname+'{display:block；}'）；
}
}

我还想说，@Nelson可能是最“正确”的，尽管它需要更多的工作才能进入始终运行良好的应用程序代码，而这不是我目前想要花费的精力

---

如果将来我必须重写这个（或编写类似的东西），我会研究

detach（）

最好的选择是添加一个类：

.selected {
    color : #00f ;
}

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

---

当您计划从DOM中删除元素以稍后重新插入它们时，请使用而不是

。remove（）

使用

.detach（）

将在以后重新插入时保留CSS。从文件中：

.detach（）方法与.remove（）相同，只是.detach（）方法 保留与删除的元素关联的所有jQuery数据。这 方法在将删除的元素重新插入到中时非常有用 DOM在以后的时间

你可以用

---

在CSS文件中创建CSS规则

.yourclass{
    color: #00f;
}

在创建元素时添加

yourclass

：

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

这应该起作用：

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

var style=$（'.class{background color:blue；}'）；
$（'html>head'）。追加（样式）；

只需使用一个类，例如：

CSS:

JavaScript:

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

然后在需要时将其拆下：

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

---

下面是我之前编写的一些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;
    }
};

---

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

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

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

试试这个

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

var style=$（'.class{背景色：蓝色！重要；}'）；
$（'html>head'）。追加（样式）；

这是一个老问题，有选择的答案，但添加动态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;}

---

公认的答案没有错。但如果你想在一行中完成这项工作，你可以这样做：

$('<style>').append('.'+classname+'{display:none}').appendTo('head')

$（''）.append（'.+classname+'{display:none}'）。appendTo（'head'））

.css（）

设置

$（“#选择器”）

的样式属性。它不创建css规则。我知道，这正是我要问的，我想创建一个规则，而不仅仅是调整属性。我只是指出了它，因为你似乎对

.css（）

方法的结果感到惊讶。这些回答给了你一些如何处理这个问题的方向。不，我对此并不感到惊讶。我非常熟悉

css（）

，我知道它只是编辑匹配的DOM元素，并没有制定永久规则，它必须是动态的，我不知道要放在那里的类我无法控制在创建元素时向元素添加类这需要插件吗？首先分离并将元素保存在变量中：

var p=$（“#myelement”）.detach（）

之后，您可以使用

$（'#somediv'）再次插入元素

或等效的

p.appendTo（'#somediv'）稍微便宜一点的js:$（'.class{background:blue；}'）.appendTo（'head'）；如果以后需要，您将如何删除头部中的样式？@Felipe$（“style”）.replaceWith可能有助于重新渲染css规则。这不适用于更改
max height
样式（css中已将其设置为400px，但我想将其更改为300px）。有什么解决方法吗？@Philll\u不给样式一个id，例如$（'.class{background:blue；}'）。appendTo（'head'）$（#customstyle”）.remove（）@请不要更改其他作者的代码。如果你认为代码是错误的或有输入错误，请留下评论！嗯，这不是说我们会破坏作者的意图吗？也许一个作者想写一些有细微错误的代码？我想知道第三方编辑功能的作用是什么，如果不是为了纠正小错误的话。
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");
    }
}

.hidden {display: none;}

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

$('<style>').append('.'+classname+'{display:none}').appendTo('head')