web-dev-qa-db-ja.com

cssクラスをdivに変更するjQuery

たとえば、1つのdiv要素があり、クラス「first」が多くのcssプロパティで定義されている場合。また、CSSクラス「second」を割り当てることもできます。このクラスには、各プロパティを行に書き込まずに、イベント時にこの同じdivにさまざまに定義された多くのプロパティがあります。

47
eomeroff
$(".first").addClass("second");

イベントに追加したい場合は、簡単に追加することもできます。クリックイベントの例:

$(".first").click(function() {
    $(this).addClass("second");
});
59
Mark Hurd

うん、簡単に。

$("#mydiv").attr("class", "second");
89
womp

次のようにjQueryでクラスを追加および削除できます。

$(".first").addClass("second")
// remove a class
$(".first").removeClass("second")

ところで、空白で区切られたマークアップに複数のクラスをすぐに設定できます

<div class="second first"></div>
30
Daff

私はあなたが何をしたいのかについて完全に明確ではないので、これは正確に目標通りではないかもしれません。ただし、イベントへの応答でdivに別のクラスを割り当てることを意味すると仮定すると、答えはイエスであり、jQueryを使用してこれを確実に行うことができます。私はjQueryの初心者ですが、コードで次のコードを使用しました。

$(document).ready(function() {
    $("#someElementID").click(function() {  // this is your event
        $("#divID").addClass("second");     // here your adding the new class
    )}; 
)};

最初のクラスを2番目のクラスに置き換える場合は、最初にremoveClassを使用し、次に上記のようにaddClassを使用すると思います。 toggleClassも一見の価値があります。 jQueryのドキュメントは、これらのタイプの変更について、例を示してよく書かれています。

他の誰かがより良い選択肢を持っていますが、それが助けになることを願っています!

3
Carvell Fenton

DivのようなHTML要素には、複数のクラスを含めることができます。 divにaddClassメソッドを使用して2つのスタイルが割り当てられているとします。 style1にfont-size、weight、colorなどの3つのプロパティがあり、style2にfont-size、weight、color、background-colorなどの4つのプロパティがある場合、結果の有効なプロパティセット(スタイル)には4つのプロパティ、つまりunionがありますすべてのスタイルセット。私たちの場合、共通のプロパティ、color、font-size、weightは、最新の値を持つ1つの占有を持ちます。 divに最初にstyle1を割り当て、style2を2番目に割り当てると、共通のプロパティはstyle2の値で上書きされます。

さらに、私は JQueryを使用してスタイルを適用、削除、管理する に投稿しました。

敬具

2
Awais
$(document).ready(function () {

            $("#divId").toggleClass('cssclassname'); // toggle class
});

**OR**

$(document).ready(function() {
        $("#objectId").click(function() {  // click or other event to change the div class
                $("#divId").toggleClass("cssclassname");     // toggle class
        )}; 
)};
0
Virang Maniar