web-dev-qa-db-ja.com

jQueryを使用してCSSクラスプロパティを変更する

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

これは実用的な例です：

クラスredのdivがあります

.red {background: red;}

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

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

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

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

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

jquerycssajaxclassproperties
63
Alvaro

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

サンプルコードは this JSFiddle fiddle から元々Alvaroによって参照されていました コメント内 からコピーされます。

35
Dennis Traub

動的にロードして別のスタイルシートを使用できない場合は、この関数を使用して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"。

17
Mathew Wolf

私が望んでいた答えが見つからなかったので、自分で解決しました：
コンテナ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の例

7
drumbumLOLcatz

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

$(document).ready(function(){
    $('#div').removeClass('left').addClass('right');
});
5
Ajmal Salim

$(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ファイルを操作した後、document.offsetHeightのようなDOM JSで無意味なメソッドを呼び出してCSSを強制的に「再描画」する必要があります"（）"）-CSSOM操作後にページを古いブラウザで強制的に再描画した後に追加するだけです。

以下に例を示します。

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

2
Benny

赤いdivの親にクラスを追加できます。グリーンスタイル

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

その後、CSSにスタイルを追加します

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

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

1
Welly

Mathew Wolfが提供する優れた答えを少し改善しました。これは、メインコンテナをスタイルタグとして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");
}
0
Justin MacArthur

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

0
checkmate711