javascript - CSSプロパティの変更OnClick

Question

z-indexHTMLを含むCSSを介したの単純な絶対配置があります。

<div id="one"> test </div>
<div id="two"> test </div>
<div id="three"> test </div>

CSS：

#one{
height: 200px;
width: 150px;
background: #a8d14f;
position: absolute;
left: 10px;
top: 30px;
z-index: 10;
}
#two{
height: 200px;
width: 150px;
background: #f97273;
position: absolute;
left: 150px;
top: 30px;
z-index: 15;
}
#three{
height: 200px;
width: 150px;
background: #43b8b0;
position: absolute;
left: 300px;
top: 30px;
z-index: 12;
}

必要：OnClickは、位置、zインデックス、背景など、選択したCSSプロパティの一部を変更します

score 6 · Accepted Answer

要素のonclickイベントの例を次に示します。oneこれにより、要素が変更されますz-index。

$(function(){
  $("#one").click(function(){
     $(this).css("z-index", 2);
  });
});

これから、残りの方法を理解できるはずです。そうでない場合は、jQueryの使用について詳しく調べてください。私たちはあなたのために仕事をするためにここにいるのではありません。

score 2 · Accepted Answer

またはjQueryなし：

document.getElementById("one").onclick = function() {
    with (this.style) {
        color = "red";
        position = "relative";
        zIndex = "10";
    }
};

score 1 · Accepted Answer

またはjQueryを使用せずに

var one = document.getElementById("one");
one.addEventListener("click", function() {
    one.style.zIndex = 5;
}, false);

score 1 · Accepted Answer

このようなことを試してください。jQueryを使用してcssプロパティを変更する方法の詳細は次のとおりです

$("#one").click(function(){
    $(this).css("position", "absolute");
});

score 0 · Accepted Answer

これが動作するjsFiddleです：http：//jsfiddle.net/qJURY/そしてこれは使用されるコードです：

$("div").click(function(){
    var z = parseInt($(this).css("z-index"));
    z += 10;
    $(this).css("z-index", z);
})

score 0 · Accepted Answer

これを試して：

$('#one').click(function(){
   $(this).css("background-color","yellow");
   $(this).css("z-index", 1);

});

別の方法として、プレーンなJavaScriptを使用することもできます。

document.getElementById('one').style.zIndex = '1'

javascript - CSSプロパティの変更OnClick

6 に答える 6

Related

Reference