2012-04-25 60 views
-6

我的的通過CSS一個簡單的絕對定位,包括z-index的 HTML:CSS Propertie變化的onclick

<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,背景

+2

你甚至還看過http://api.jquery.com/css/嗎? – 2012-04-25 13:00:11

+0

[你到目前爲止嘗試過什麼?](http://mattgemmell.com/2008/12/08/what-have-you-tried/) – Jakub 2012-04-25 13:00:39

+0

我在JavaScript或jQuery中使用jQuery的總數爲n – 2012-04-25 13:01:24

回答

6

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

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

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

+0

使用jQuery。可以使用簡單的JavaScript document.getElementById('one')。style.zIndex ='2'; – GlennG 2012-04-25 13:04:38

+0

@GlennG這是嘗試,但考慮到OP想改變不少風格,這似乎是最好的方法。另外,您對點擊事件監聽器有何建議?你會繼續使用jQuery點擊事件嗎?如果是的話,使用'$(this)'是有意義的。 – Curt 2012-04-25 14:13:46

0

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

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

或者沒有jQuery的:

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

使用或不使用jQuery的

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

試試這個:

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

}); 

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

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