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()。

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

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

Answer 5

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

.selected {
    color : #00f ;
}

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

Answer 6

您可以使用livequery plugin。

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

Answer 7

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

Answer 8

在CSS文件中创建CSS规则

.yourclass{
    color: #00f;
}

每当您创建元素时添加yourclass：

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

Answer 9

只需使用一个类，例如：

CSS：

.setcolor { color: #fff; }

JavaScript的：

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

然后在需要时将其删除：

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

Answer 10

接受的答案没有错。但是，如果您只想一行执行此操作，则可以执行以下操作：

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

Answer 11

试试这个

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

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

11 个答案: