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

IT技术 javascript jquery css
2021-02-27 16:32:34

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

$('#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().

6个回答

这应该有效：

var style = $('<style>.class { background-color: blue; }</style>');
$('html > head').append(style);
@Philll_t 给样式一个 id 例如 $('<style id="customstyle">.class { background: blue; }</style>').appendTo('head'); $("#customstyle").remove();
2021-04-26 16:32:34
@Felipe $("style").replaceWith 可能有助于重新渲染 css 规则。
2021-04-27 16:32:34
稍微便宜一点的 js： $('<style>.class { background: blue; }</style>').appendTo('head'); jsfiddle.net/b9chris/LNYaR
2021-05-07 16:32:34
如果以后需要，您将如何在头部删除该样式？
2021-05-09 16:32:34
这不适用于更改max-height样式（在 CSS 中已将其设置为 400 像素，但我想将其更改为 300 像素）。有什么解决方法吗？
2021-05-21 16:32:34

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

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

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

你先分离并保存在一个变量元素：var p = $("#myelement").detach();那么以后你可以再次插入您的元$('#somediv').append(p); 或同等p.appendTo('#somediv');
2021-05-05 16:32:34

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

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

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

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

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

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

@kokociel 请不要更改其他作者的代码。如果您认为代码有误或有错别字，请发表评论！
2021-04-26 16:32:34
嗯，这不是在断言我们会破坏作者的意图吗？也许作者想编写带有细微错误的代码？我想知道 3rd-party 编辑功能应该提供什么目的，如果不是为了纠正小错误。
2021-05-16 16:32:34

您可以使用livequery 插件。

$('#selector').livequery(function() { $(this).css('color', '#00f'); });
为什么这需要一个插件？
2021-04-30 16:32:34
其它你可能感兴趣的问题
上一篇如何在 IE HTML 条件中创建“else”？ 下一篇JavaScript：来自 ASP.NET 代码隐藏的 Alert.Show(message)