77

jQueryを使用して、要素のプロパティではなく、CSSクラスのプロパティを変更する方法はありますか？

これは実際的な例です。

私はクラスのあるdivを持っていますred

.red {background: red;}

クラスの背景が割り当てられredている要素ではなく、クラスの背景プロパティを変更したい。red

jQuery .css（）メソッドでそれを行う場合：

$('.red').css('background','green');

現在クラスを持っている要素に影響しますred。ここまではすべて問題ありません。しかし、Ajax呼び出しを行い、redクラスでさらにdivを挿入すると、それらは緑色の背景を持たず、初期のred背景を持ちます。

jQuery .css（）メソッドを再度呼び出すことができます。しかし、クラス自体を変更する方法があるかどうか知りたいです。これは単なる基本的な例であると考えてください。

4

8 に答える 8

46

jQueryを使用してCSSプロパティを直接変更することはできません。ただし、少なくとも2つの方法で同じ効果を得ることができます。

ファイルからCSSを動的にロードする

function updateStyleSheet(filename) {
    newstylesheet = "style_" + filename + ".css";

    if ($("#dynamic_css").length == 0) {
        $("head").append("<link>")
        css = $("head").children(":last");

        css.attr({
          id: "dynamic_css",
          rel:  "stylesheet",
          type: "text/css",
          href: newstylesheet
        });
    } else {
        $("#dynamic_css").attr("href",newstylesheet);
    }
}

上記の例は、次の場所からコピーされています。

スタイル要素を動的に追加する

$("head").append('<style type="text/css"></style>');
var newStyleElement = $("head").children(':last');
newStyleElement.html('.red{background:green;}');

サンプルコードは、Alvaroがコメントで最初に参照したこのJSFiddleフィドルからコピーされています。

于 2012-07-13T16:27:33.693 に答える
21

動的にロードして別のスタイルシートを使用できない場合は、この関数を使用してCSSクラスを変更できます。お役に立てば幸いです...

function changeCss(className, classValue) {
    // we need invisible container to store additional css definitions
    var cssMainContainer = $('#css-modifier-container');
    if (cssMainContainer.length == 0) {
        var cssMainContainer = $('<div id="css-modifier-container"></div>');
        cssMainContainer.hide();
        cssMainContainer.appendTo($('body'));
    }

    // and we need one div for each class
    classContainer = cssMainContainer.find('div[data-class="' + className + '"]');
    if (classContainer.length == 0) {
        classContainer = $('<div data-class="' + className + '"></div>');
        classContainer.appendTo(cssMainContainer);
    }

    // append additional style
    classContainer.html('<style>' + className + ' {' + classValue + '}</style>');
}

この関数は任意のクラス名を取り、以前に設定された値を新しい値に置き換えます。以下をclassValueに渡すことにより、複数の値を追加できることに注意してください"background: blue; color:yellow"。

于 2013-11-07T01:36:36.107 に答える
9

必要な答えが見つからなかったので、自分で解決しまし
た。コンテナdivを変更してください。

<div class="rotation"> <!-- Set the container div's css -->
  <div class="content" id='content-1'>This div gets scaled on hover</div>
</div>

<!-- Since there is no parent here the transform doesnt have specificity! -->
<div class="rotation content" id='content-2'>This div does not</div>

$ target.css（）を実行した後に永続化したいcss

.content:hover {
    transform: scale(1.5);
}

css（）を使用してコンテンツを含むdivを変更する

$(".rotation").css("transform", "rotate(" + degrees + "deg)");

Codepenの例

于 2015-12-14T00:06:54.137 に答える
8

クラスを削除して動的に追加できます

$(document).ready(function(){
    $('#div').removeClass('left').addClass('right');
});
于 2013-07-23T10:22:17.387 に答える
2

$(document)[0].styleSheets[styleSheetIndex].insertRule(rule, lineIndex);

styleSheetIndexは、ファイルをロードした順序に対応するインデックス値です<head>（たとえば、0は最初のファイル、1は次のファイルなど、CSSファイルが1つしかない場合は、0を使用します）。

ruleテキスト文字列のCSSルールです。このように："body { display:none; }"。

lineIndexそのファイルの行番号です。最後の行番号を取得するには、を使用します$(document)[0].styleSheets[styleSheetIndex].cssRules.length。console.logそのstyleSheetオブジェクトだけで、いくつかの興味深いプロパティ/メソッドがあります。

CSSは「カスケード」であるため、そのセレクターに挿入しようとしているルールは、CSSファイルの下部に追加するだけで、ページの読み込み時にスタイル設定されたものがすべて上書きされます。

一部のブラウザでは、CSSファイルを操作した後、DOM JSで無意味なメソッドを呼び出すことによってCSSを強制的に「再描画」する必要がありますdocument.offsetHeight（メソッドではなくDOMプロパティとして抽象化されるため、「（）」は使用しないでください）。 --CSSOM操作の後にそれを追加するだけで、古いブラウザでページが再描画されます。

だからここに例があります：

var stylesheet = $(document)[0].styleSheets[0]; stylesheet.insertRule('body { display:none; }', stylesheet.cssRules.length);

于 2015-07-27T18:11:36.413 に答える
1

赤のdivの親にクラスを追加できます（例：緑のスタイル）

$('.red').parent().addClass('green-style');

次に、cssにスタイルを追加します

.green-style .red {
     background:green; 
}

したがって、緑のスタイルの下に赤の要素を追加するたびに、背景は緑になります

于 2013-11-07T03:09:03.503 に答える
0

これは、MathewWolfによって提供された優れた回答を少し改善したものです。これは、メインコンテナをスタイルタグとしてhead要素に追加し、新しい各クラスをそのスタイルタグに追加します。もう少し簡潔にすると、うまく機能することがわかります。

function changeCss(className, classValue) {
    var cssMainContainer = $('#css-modifier-container');

    if (cssMainContainer.length == 0) {
        var cssMainContainer = $('<style id="css-modifier-container"></style>');
        cssMainContainer.appendTo($('head'));
    }

    cssMainContainer.append(className + " {" + classValue + "}\n");
}
于 2014-11-27T01:17:22.597 に答える
0

別のアプローチを取ることもできます。cssを動的に変更する代わりに、CSSでスタイルを希望どおりに事前定義します。次に、JQueryを使用して、Javascript内からスタイルを追加および削除します。（Ajmalのコードを参照）

于 2015-02-08T11:28:23.857 に答える