Can you show me Javascript that allows you to change the background color of the page to another color. For example, I have a blue background color and I want to change it to green. The color must be changed when the user presses a button that triggers the event. I saw that it exists on many sites but I could not write the code I write in REACTJS I would love to have your help
Thanks...
This question is related to
javascript
html
css
reactjs
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.
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:
$(“#DIV_YOU_WANT_CHANGE”).click(function() {
$(this).addClass(“.your_class_with_new_color”);
});
You can use setTimeout():
var addBg = function(e) {_x000D_
e = e || window.event;_x000D_
e.preventDefault();_x000D_
var el = e.target || e.srcElement;_x000D_
el.className = 'bg';_x000D_
setTimeout(function() {_x000D_
removeBg(el);_x000D_
}, 10 * 1000); //<-- (in miliseconds)_x000D_
};_x000D_
_x000D_
var removeBg = function(el) {_x000D_
el.className = '';_x000D_
};div {_x000D_
border: 1px solid grey;_x000D_
padding: 5px 7px;_x000D_
display: inline-block;_x000D_
margin: 5px;_x000D_
}_x000D_
.bg {_x000D_
background: orange;_x000D_
}<body onclick='addBg(event);'>This is body_x000D_
<br/>_x000D_
<div onclick='addBg(event);'>This is div_x000D_
</div>_x000D_
</body>Using jQuery:
var addBg = function(e) {_x000D_
e.stopPropagation();_x000D_
var el = $(this);_x000D_
el.addClass('bg');_x000D_
setTimeout(function() {_x000D_
removeBg(el);_x000D_
}, 10 * 1000); //<-- (in miliseconds)_x000D_
};_x000D_
_x000D_
var removeBg = function(el) {_x000D_
$(el).removeClass('bg');_x000D_
};_x000D_
_x000D_
$(function() {_x000D_
$('body, div').on('click', addBg);_x000D_
});div {_x000D_
border: 1px solid grey;_x000D_
padding: 5px 7px;_x000D_
display: inline-block;_x000D_
margin: 5px;_x000D_
}_x000D_
.bg {_x000D_
background: orange;_x000D_
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>_x000D_
_x000D_
<body>This is body_x000D_
<br/>_x000D_
<div>This is div</div>_x000D_
</body>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);
})
If you want change background color on button click, you should use JavaScript function and change a style in the HTML page.
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 :
<input type="button" onclick="chBackcolor('red');">
I recommend to use jQuery for this.
If you want it only for some seconds, you can use setTimeout function:
window.setTimeout("chBackColor()",10000);
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);
}
You can set the background color of an object using 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.
body {_x000D_
background-color: blue;_x000D_
}<button onclick="document.body.style.backgroundColor = 'green';">Green</button>Source: Stackoverflow.com