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

Question

我有一个有点不寻常的问题。我已经做过很多次类似于这样的事情：

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

我的问题是，我创建了一个<div id="selector">，然后调用上述命令，它可以正常工作。

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

是否有一种方法可以在CSS中添加规则，以便它将影响将来创建的具有相同id/class的项目？我喜欢jQuery，但只使用纯JavaScript也可以。

它必须是动态的，我不知道要放在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>'));
    }
}

我还想说，@Nelson 可能是最“正确”的，尽管需要更多的工作来进入始终正常工作的应用程序代码，但这不是我此时想要花费的努力。

如果将来必须重写这个（或类似的）内容，我会研究 detach()。

- Landon

---

.css()方法设置$('#selector')元素的样式属性。它不会创建CSS规则。 - Zefiryn

我知道，那正是我想问的，我想创建一个规则，而不仅仅是调整一个属性。 - Landon

我只是指出来，因为你似乎对.css()方法的结果感到惊讶。回复给了你一些方向，告诉你如何处理这个问题。 - Zefiryn

不，我对此并不感到惊讶。我非常熟悉 css()，我知道它只是编辑匹配的 DOM 元素，而不会创建永久规则。 - Landon

Answer 1

这应该可以运行：

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

- lucassp

---

略微更便宜的js代码：$('<style>.class { background: blue; }</style>').appendTo('head'); 在这里查看示例：http://jsfiddle.net/b9chris/LNYaR/ - Chris Moschini

如果以后需要，你如何删除头部的样式？ - Philll_t

@Felipe $("style").replaceWith 可能有助于重新渲染 CSS 规则。 - Nasser Al-Wohaibi

@Philll_t 给样式添加一个id，例如： $('<style id="customstyle">.class { background: blue; }</style>').appendTo('head'); $("#customstyle").remove(); - Adam Jimenez

如果这对某人不起作用，请查看我的答案，其中添加了“！important”。 - codemirror

Answer 2

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

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

.detach()方法与.remove()相同，不同之处在于.detach()会保留所有与已删除元素相关联的jQuery数据。当需要稍后重新插入已删除元素到DOM中时，此方法非常有用。

- Nelson

---

首先，你需要将元素从页面上分离出来并保存在变量中：var p = $("#myelement").detach(); 然后，稍后你可以使用 $('#somediv').append(p); 或其等效形式 p.appendTo('#somediv'); 将该元素再次插入到网页中。 - Nelson

Answer 3

如果这个样式部分需要被多次更改，你可以在HTML文件中设置一个带有ID的样式标签。

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

然后你可以使用js引用它，编辑或删除内容，例如：

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

在这种方式下，样式部分不会变得更大，如果你多次更改它，因为你不仅仅是将它附加到头部，而是根据需要进行编辑。

- amichai

---

@kokociel请不要更改其他作者的代码。如果您认为代码有误或存在错别字，请留下评论！ - TylerH

嗯，这不是在断言我们会削弱作者的意图吗？也许作者想写一些有微妙错误的代码？我想知道第三方编辑功能应该提供什么目的，如果不是为了纠正小错误。 - kokociel

Answer 4

这是我之前编写的一些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')));

- Paul S.

Answer 5

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

.selected {
    color : #00f ;
}

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

- Sushanth --

Answer 6

您可以使用livequery插件。

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

- Almir Sarajčić

---

为什么需要使用插件？ - Landon

Answer 7

接受的答案没有问题。但是如果您想在一行中完成此操作，您可以像这样做：

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

- PHP Guru

Answer 8

这是一个旧问题，已经有了一个选定的答案，但是添加动态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;}

- Khan

Answer 9

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

.yourclass{
    color: #00f;
}

在创建元素时，无论何时都要添加yourclass：

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

- Anoop

---

它必须是动态的，我不知道要放哪些类。 - Landon

当元素被创建时，我无法控制添加类。 - Landon

Answer 10

只需使用一个类，例如：

CSS：

.setcolor { color: #fff; }

JavaScript：

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

需要时，将其删除：

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

- gregwhitworth