web-dev-qa-db-ja.com

.click（function（）{でDIVの背景色を変更します

JQuery .click（function（）{で背景色を変更するにはどうすればよいですか？

divノーマル、緑色、クリックすると赤色の背景色に変わります

<div class="stileone">
   Div Content
</div>
jquerycolorsbackgroundclick
5
Genial
$(".stileone").on("click", function() {
    $(this).css("background", "red");
})

[〜＃〜]デモ[〜＃〜]

11
Zoltan Toth

ここにはたくさんの答えがあることは知っていますが、私が指摘したいのですが、これを達成する方法はたくさんあり、目的が少し異なるものもたくさんあります。

基本的なCSS疑似クラスは、このようなものを処理することを目的としていますが、必ずしもクロスブラウザー互換であるとは限りません。たとえば、次の機能はIE> = 8では機能しないと思いますが、ChromeおよびIE9では機能します。

div:active { background-color: red; }

そしてもちろん基本的なクリックからCSSへの変更。もちろん、これにより、他のコマンドがなくても、変更が永続的になります。

$("div").on("click", function() {
    $(this).css("background-color", "red");
});
//  OR
$("div").on("click", function() {
    $(this).css({ backgroundColor: "red" });
});

前の回答で示したように、クリックしてクラスを切り替えます。この場合、希望する背景でクラスを作成し、クリックアクションに基づいてそのクラスのオンとオフを切り替えます。

$("div").on("click", function() {
    $(this).toggleClass('back-red');
});

:activeを模倣するjQueryの方法が必要な場合は、単純なクリックの代わりにmousedown/upを利用できます。これにより、CSSの「：active」機能を効果的に「クロスブラウザ」で模倣できるようになります。

$("#div5").on("mousedown", function() {
    $(this).toggleClass('back-red');
})
.on("mouseup", function(e) {
    $(this).toggleClass('back-red');
});

最後に、私が今考えることができる最後の機能は、最新のjQuery（1.8+）で現在壊れているメソッドを使用することですが、すべてにおいて他のjQuery（1.72-）は正常に動作しているようです。これは「トグル」メソッドと呼ばれ、通常、要素の表示と非表示を定義するために使用されます。ただし、古いバージョンでは、コールバックを定義して独自のアニメーションを作成できる代替機能があります。

$("div").toggle(function() {
    $(this).css("background-color", "red");
}, 
function() {
    $(this).css("background-color", "");
});

ここで例を参照してください！

4
SpYk3HH

.on()を操作します。イベント_<div.stileone>_が発生したときに_'click'_でイベントをバインドし、次に$(this)を使用して関数内の_<div.stileone>_オブジェクトを参照します。そしてtoggleClass adds/removesイベントがトリガーされるたびにクラス。

jQuery：

_$('.stileone').on('click',function(){
  $(this).css('backgroundColor','red');
  // OR: if you want to work with a class
  $(this).toggleClass('redClass');
});
_

css：

_.redClass {
background-color: red;
}
_
0
Munchies