javascript 单击按钮后如何更改颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25171658/
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
How to change color button after clicking on it
提问by Fation Hadri
I want to change color of button after clicking on it.I have tried with css and javascript but it doesn't work for me. Here is the css code
单击按钮后，我想更改按钮的颜色。我尝试过使用 css 和 javascript，但它对我不起作用。这是css代码
<style>
.style {
width: 115px;
height: 45px;
background: #8CC639;
padding: 15px;
text-align: center;
border-radius: 5px;
color: #3071A9;
font-weight: bold;
cursor: pointer;
}
.style:hover {
background: blue;
}
.style:active{
background: blue;
} */
.style:visited {
color: red;
}
</style>
And here is the content in my jsp page:
这是我的jsp页面中的内容：
<script>
$(document).ready(function(){
$('#btnHousing').click(function() {
//Now just reference this button and change CSS
$(this).css('background-color','#f47121');
});
$( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.error(function() {
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
});
}
});
})(jQuery);
</script>
<div class="page">
<fieldset>
<form>
<div align="center">
<input type = "button"
value = "Throw"
onclick = "javascript:location.href='throw.html';"
/>
<span class="right">
<input type = "button" id="style"
value = "User"
onclick = "javascript:location.href='userAction.html'; "
/>
</div>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Create</a></li>
<!-- <li><a href="user/viewLogin.html">Log In</a></li> -->
<li><a href="#tabs-2">Update</a></li>
</ul>
<div id="tabs-1">
<h1>Create</h1>
</div>
<div id="tabs-2">
<h1>Update</h1>
</div>
</div>
</form>
</fieldset>
</div>
I want like stackoverflow button.When user click on button the color of button change after clicking on it.I have tried in some ways.Any code in css ,JQuery ore javascript?Thank you!
我想要像 stackoverflow 按钮。当用户单击按钮时，单击按钮后按钮的颜色会发生变化。我尝试了一些方法。css 中的任何代码，JQuery 或 javascript？谢谢！
采纳答案by Micaiah Wallace
You used a class css selector rather than an id selector.
您使用了类 css 选择器而不是 id 选择器。
change the style to
将样式更改为
#style
instead of
代替
.style
or change the button to say
或更改按钮说
class="style"
回答by hex494D49
document.getElementById('id-of-the-button').onclick = function(){
this.style.backgroundColor = '#ff0000';
};
Or
或者
<style type="text/css">
.red {background-color: #ff0000;}
</style>
document.getElementById('id-of-the-button').onclick = function(){
this.className = 'red';
};
回答by user2608289
You can try this:
你可以试试这个：
var button = document.querySelector("button");
button.addEventListener("click", function() {
document.body.classList.toggle("purple");
//the purple is a css class
})
回答by Adam Tal
Your click handling seems to be ok.
您的点击处理似乎没问题。
It seems you just don't have a button with id "btnHousing".
看来您只是没有 ID 为“btnHousing”的按钮。
A tested working example based on your code:
基于您的代码的经过测试的工作示例：
<input type="button" id="btnHousing" value="Housing"/>
<script>
$('#btnHousing').click(function() {
//Now just reference this button and change CSS
$(this).css('background-color','#f47121');
});
</script>
