javascript change background color on click

Question

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

User · Answer

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.

_x000D_

body {_x000D_
  background-color: blue;_x000D_
}

_x000D_

<button onclick="document.body.style.backgroundColor = 'green';">Green</button>

_x000D_

User · Answer

You can use setTimeout      x000D   x000D  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      lt --  in miliseconds  x000D     x000D   x000D  var removeBg   function el    x000D    el className       x000D     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    x000D   lt body onclick  addBg event    gt This is body x000D     lt br  gt  x000D     lt div onclick  addBg event    gt This is div x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   x000D    Using jQuery    x000D   x000D  var addBg   function e    x000D    e stopPropagation    x000D    var el     this   x000D    el addClass  bg    x000D    setTimeout function     x000D      removeBg el   x000D       10   1000      lt --  in miliseconds  x000D     x000D   x000D  var removeBg   function el    x000D      el  removeClass  bg    x000D     x000D   x000D    function     x000D       body  div   on  click   addBg   x000D      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    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   x000D   lt body gt This is body x000D     lt br  gt  x000D     lt div gt This is div lt  div gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

you can do this---   lt input type  button  onClic  changebackColor  gt   function changebackColor    document body style backgroundColor    black   document getElementByID  divID   style backgroundColor    black         window setTimeout  yourFunction    10000

User · Answer

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

User · Answer

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     lt input type  button  onclick  chBackcolor  red     gt    I recommend to use jQuery for this    If you want it only for some seconds  you can use setTimeout function   window setTimeout  chBackColor    10000

User · Answer

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

User · Answer

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        http   jsfiddle net ea1xf3sx

[javascript] javascript change background color on click

Examples related to javascript

Examples related to html

Examples related to css

Examples related to reactjs