CSS Propertie變化的onclick

Question

我的的通過CSS一個簡單的絕對定位，包括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

下面是one元素的onclick事件的示例，它將cha它的z-index。

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

從這裏你應該能夠解決剩下的問題。如果不是的話，那麼再看看jQuery的用法。我們不在這裏爲你做這項工作。

Answer 2

這裏是一個工作的jsfiddle：http://jsfiddle.net/qJURY/ ，這是所使用的代碼：

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

Answer 3

嘗試這樣的事情。 Here's more details on how to change css properties with jQuery

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

Answer 4

或者沒有jQuery的：

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

Answer 5

使用或不使用jQuery的

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

Answer 6

試試這個：

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

}); 

替代你可以使用普通的JavaScript：

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