60

少し変わった問題があります。私は何度もこのようなことをしました：

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

私の問題は、を作成し<div id="selector">、上記のコマンドを呼び出すと正常に動作することです。

さて、別のイベントで、後でその要素をDOMから削除し、後で同じIDで再度追加します。この要素には現在がありませんcolor:#00f。

id同じ/で将来作成されるアイテムに影響を与えるように、CSSにルールを追加する方法はありclassますか？私はjQueryが好きですが、プレーンなJavaScriptを使用するものなら何でも構いません。

それは動的でなければならず、CSSファイルに入れるクラスがわかりません。また、アプリケーションの過程で、1つの属性を数回変更する予定です。たとえば、を、に、に設定colorし、に戻します。blackblueredblack


私は@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()を使用してください。

を使用.detach()すると、後で再挿入するときにCSSが保持されます。ドキュメントから：

.detach（）メソッドは.remove（）と同じですが、.detach（）が削除された要素に関連付けられたすべてのjQueryデータを保持する点が異なります。このメソッドは、削除された要素を後でDOMに再挿入する場合に役立ちます。

于 2012-10-25T19:38:19.657 に答える
7

CSSを追加、削除、編集するために以前に作成したJavaScriptコードを次に示します。

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

最良のオプションは、クラスを追加することです。

.selected {
    color : #00f ;
}

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

livequeryプラグインを使用できます。

$('#selector').livequery(function() { $(this).css('color', '#00f'); });
于 2012-10-25T19:38:30.120 に答える
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 に答える
1

受け入れられた答えに問題はありません。ただし、これを1行で実行したい場合は、次のように実行できます。

$('<style>').append('.'+classname+'{display:none}').appendTo('head')
于 2020-03-19T20:26:45.533 に答える
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

ドキュメントにすでにスタイル要素がある場合は、vanillajsを使用して別のルールを追加することができます。

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 に答える