Javascript javascript在单击时更改背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31089414/
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
javascript change background color on click
提问by Manuela Arecibo
I am kind of new to programming and I am trying to learn new methods and ways...
我对编程有点陌生，我正在尝试学习新的方法和方式......
Can you show me a Javascript that makes it possible to change the color of page background color to another one . For example, i have a blue background color and i want to change it to green. The color should be changed when the user clicks on the background and triggers the event.
你能告诉我一个 Javascript，它可以将页面背景颜色的颜色更改为另一种颜色。例如，我有一个蓝色的背景颜色，我想把它改成绿色。当用户单击背景并触发事件时，应更改颜色。
Also..the same thing for a Div, change color on click, but after 10 seconds, it would return to initial color. It's something with clearInterval, but i am not an expert..yet.
另外..对于 Div 也是一样，点击时改变颜色，但 10 秒后，它会恢复到初始颜色。这是clearInterval的东西，但我不是专家......还没有。
Thank you...
谢谢...
回答by Saeed Rahmani
If you want change background color on button click, you should use JavaScript function and change a style in the HTML page.
如果您想更改按钮单击时的背景颜色，您应该使用 JavaScript 函数并更改 HTML 页面中的样式。
function chBackcolor(color) {
document.body.style.background = color;
}
It is a function in JavaScript for change color, and you will be call this function in your event, for example :
它是 JavaScript 中用于更改颜色的函数，您将在事件中调用此函数，例如：
<input type="button" onclick="chBackcolor('red');">
I recommend to use jQueryfor this.
我建议为此使用jQuery。
If you want it only for some seconds, you can use setTimeoutfunction:
如果你只想要几秒钟，你可以使用setTimeout函数：
window.setTimeout("chBackColor()",10000);
回答by MT0
You can set the background color of an object using CSS.
您可以使用 CSS 设置对象的背景颜色。
You can also use JavaScript to attach click handlers to objects and they can change the style of an object using element.style.property = 'value';. In the example below I've attached it in the HTML to a button but the handler could equally have been added to the body element or defined entirely in JavaScript.
您还可以使用 JavaScript 将单击处理程序附加到对象，并且它们可以使用element.style.property = 'value';. 在下面的示例中，我在 HTML 中将它附加到一个按钮，但处理程序同样可以添加到 body 元素或完全在 JavaScript 中定义。
body {
background-color: blue;
}<button onclick="document.body.style.backgroundColor = 'green';">Green</button>回答by ErDmKo
Here you can find solutions for both your problems.
在这里，您可以找到解决这两个问题的方法。
document.body.style.height = '500px';
document.body.addEventListener('click', function(e){
var self = this,
old_bg = this.style.background;
this.style.background = this.style.background=='green'? 'blue':'green';
setTimeout(function(){
self.style.background = old_bg;
}, 1000);
})
回答by user3590094
I'm suggest that you learn about Jquery, most popular JS library. With jquery it's simple to acomplish what you want.Simle example below:
我建议你学习 Jquery，最流行的 JS 库。使用 jquery 很容易完成你想要的。下面的简单例子：
$(“#DIV_YOU_WANT_CHANGE”).click(function() {
$(this).addClass(“.your_class_with_new_color”);
});
回答by user3590094
You can use setTimeout():
您可以使用setTimeout()：
var addBg = function(e) {
e = e || window.event;
e.preventDefault();
var el = e.target || e.srcElement;
el.className = 'bg';
setTimeout(function() {
removeBg(el);
}, 10 * 1000); //<-- (in miliseconds)
};
var removeBg = function(el) {
el.className = '';
};div {
border: 1px solid grey;
padding: 5px 7px;
display: inline-block;
margin: 5px;
}
.bg {
background: orange;
}<body onclick='addBg(event);'>This is body
<br/>
<div onclick='addBg(event);'>This is div
</div>
</body>Using jQuery:
使用jQuery：
var addBg = function(e) {
e.stopPropagation();
var el = $(this);
el.addClass('bg');
setTimeout(function() {
removeBg(el);
}, 10 * 1000); //<-- (in miliseconds)
};
var removeBg = function(el) {
$(el).removeClass('bg');
};
$(function() {
$('body, div').on('click', addBg);
});div {
border: 1px solid grey;
padding: 5px 7px;
display: inline-block;
margin: 5px;
}
.bg {
background: orange;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>This is body
<br/>
<div>This is div</div>
</body>回答by RajSharma
you can do this---
你可以这样做 - -
<input type="button" onClic="changebackColor">
function changebackColor(){
document.body.style.backgroundColor = "black";
document.getElementByID("divID").style.backgroundColor = "black";
window.setTimeout("yourFunction()",10000);
}
回答by David
You can sets the body's background colour using document.body.style.backgroundColor = "red";so this can be put into a function that's called when the user clicks.
The next part can be done by using document.getElementByID("divID").style.backgroundColor = "red";window.setTimeout("yourFunction()",10000);which calls yourFunction in 10 seconds to change the colour back.
您可以使用设置主体的背景颜色，document.body.style.backgroundColor = "red";以便将其放入用户单击时调用的函数中。下一部分可以通过使用document.getElementByID("divID").style.backgroundColor = "red";window.setTimeout("yourFunction()",10000);which 在 10 秒内调用 yourFunction 来改变颜色来完成。
