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

Question

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

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

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

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

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

它必须是动态的,我不知道要放入CSS文件的类.此外,我计划在应用程序的过程中更改一个属性几个不同的时间.例如,设置colorto black,to blue,to red和back 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().

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 id="myStyleTag">
</style>

那么您可以使用js引用它，编辑或删除内容，例如：

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

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