60

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

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

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

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

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

它必须是动态的，而且我不知道要放入 CSS 文件中的类。此外，我计划在整个应用过程中多次更改单个属性。例如，设置colorto black、 to blue、 tored和 back to 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().

4

12 回答 12

95

这应该有效：

var style = $('<style>.class { background-color: blue; }</style>');
$('html > head').append(style);
于 2012-10-25T19:39:07.967 回答
12

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

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

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

于 2012-10-25T19:38:19.657 回答
7

这是我之前编写的一些 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')));
于 2012-10-25T19:43:00.243 回答
7

如果此样式部分假设多次更改，您可以在 html 文件中设置带有 id 的样式标记：

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

然后您可以使用 js 引用它，编辑或删除以下内容：

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

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

于 2015-12-15T15:26:06.847 回答
1

您可以使用livequery 插件。

$('#selector').livequery(function() { $(this).css('color', '#00f'); });
于 2012-10-25T19:38:30.120 回答
1

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

.selected {
    color : #00f ;
}

$('#elemId').addClass('selected')
于 2012-10-25T19:37:34.273 回答
1

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

$('<style>').append('.'+classname+'{display:none}').appendTo('head')
于 2020-03-19T20:26:45.533 回答
1

这是一个老问题，有一个选择的答案，但添加动态 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;}
于 2017-10-24T15:06:22.570 回答
0

在 CSS 文件中创建 CSS 规则

.yourclass{
    color: #00f;
}

yourclass在创建元素时添加：

$("#selector").addClass("yourclass");
于 2012-10-25T19:38:36.690 回答
0

只需使用一个类，例如：

CSS：

.setcolor { color: #fff; }

JavaScript：

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

然后在需要时将其删除：

$('#selector').removeClass('setcolor');
于 2012-10-25T19:40:06.810 回答
0

如果您的文档中已经有样式元素，则可以使用 vanilla js 添加另一个规则：

document.styleSheets[0].addRule('#selector', 'color: #00f');
于 2021-12-17T12:03:12.523 回答
-1

尝试这个

var style = $('<style>.class { background-color: blue !important; }</style>');
$('html > head').append(style);
于 2017-04-12T07:33:06.550 回答