javascript CSS 属性更改 OnClick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10316176/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Propertie change OnClick
提问by a.jadov
I have a simple absolute positioning of 's via CSS including z-index HTML:
我通过 CSS 对 's 进行了简单的绝对定位，包括 z-index HTML：
<div id="one"> test </div>
<div id="two"> test </div>
<div id="three"> test </div>
CSS:
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;
}
Needed: OnClick change some of CSS properties for selected like position, z-index, background
需要：OnClick 更改选定的一些 CSS 属性，如位置、z-index、背景
回答by Curt
Here's an example of an onclick event for the oneelement, which will change its z-index.
这是one元素的 onclick 事件示例，它将更改其z-index.
$(function(){
$("#one").click(function(){
$(this).css("z-index", 2);
});
});
From this you should be able to work out how to do the rest. If not, then look into the use of jQuery more. We're not here to do the work for you.
从这里你应该能够弄清楚如何做剩下的事情。如果没有，那么更多地研究 jQuery 的使用。我们不是来为你做这项工作的。
回答by VisioN
Or without jQuery:
或者没有 jQuery：
document.getElementById("one").onclick = function() {
with (this.style) {
color = "red";
position = "relative";
zIndex = "10";
}
};?
回答by VisioN
Or without using jQuery
或者不使用 jQuery
var one = document.getElementById("one");
one.addEventListener("click", function() {
one.style.zIndex = 5;
}, false);
回答by Jonathan
Try something like this. Here's more details on how to change css properties with jQuery
尝试这样的事情。这是有关如何使用 jQuery 更改 css 属性的更多详细信息
$("#one").click(function(){
$(this).css("position", "absolute");
});
回答by gabitzish
Here is a working jsFiddle: http://jsfiddle.net/qJURY/and this is the code used :
这是一个有效的 jsFiddle：http: //jsfiddle.net/qJURY/，这是使用的代码：
$("div").click(function(){
var z = parseInt($(this).css("z-index"));
z += 10;
$(this).css("z-index", z);
})
?
回答by Vimalnath
Try this:
试试这个：
$('#one').click(function(){
$(this).css("background-color","yellow");
$(this).css("z-index", 1);
});
alternate you could use plain javascript:
或者你可以使用普通的javascript：
document.getElementById('one').style.zIndex = '1'
