javascript - CSS 属性更改 OnClick

Question

我通过 CSS 对 's 进行了简单的绝对定位，包括 z-index HTML：

<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 更改一些选定的 CSS 属性，如位置、z-index、背景

Answer 1

这是元素的 onclick 事件示例one，它将更改其z-index.

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

从这里你应该能够弄清楚如何做剩下的事情。如果没有，那就多看看jQuery的使用。我们不是来为您工作的。

Answer 2

或者没有 jQuery：

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

Answer 3

或者不使用 jQuery

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

Answer 4

尝试这样的事情。这是有关如何使用 jQuery 更改 css 属性的更多详细信息

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

Answer 5

Try this:

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

});

alternate you could use plain javascript:

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

Answer 6

这是一个有效的 jsFiddle： http: //jsfiddle.net/qJURY/ ，这是使用的代码：

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