How do I change the background color with JavaScript

Question

Anyone know a simple method to swap the background color of a webpage using JavaScript

User · Answer

You can change background of a page by simply using   function changeBodyBg color       document body style background   color      Read more   Changing the Background Color

User · Answer

You don t need AJAX for this  just some plain java script setting the background-color property of the body element  like this   document body style backgroundColor     AA0000     If you want to do it as if it was initiated by the server  you would have to poll the server and then change the color accordingly

User · Answer

This code makes random color for background every second   x000D   x000D  setInterval changeColor 1000   function changeColor      let r   Math random     255     let g   Math random     255     let b   Math random     255        document body style backgroundColor    rgb    r     g     b        x000D   x000D   x000D   I hope helps someone

User · Answer

AJAX is getting data from the server using Javascript and XML in an asynchronous fashion  Unless you want to download the colour code from the server  that s not what you re really aiming for   But otherwise you can set the CSS background with Javascript  If you re using a framework like jQuery  it ll be something like this      body   css  background     ccc      Otherwise  this should work   document body style background     ccc

User · Answer

Modify the JavaScript property document body style background   For example   function changeBackground color       document body style background   color     window addEventListener  load  function     changeBackground  red         Note  this does depend a bit on how your page is put together  for example if you re using a DIV container with a different background colour you will need to modify the background colour of that instead of the document body

User · Answer

lt  DOCTYPE html gt   lt html gt   lt body gt   lt select name    id  select  onClick  hello     gt       lt option gt Select lt  option gt       lt option style  background-color   CD5C5C   gt  CD5C5C lt  option gt       lt option style  background-color   F08080   gt  F08080 lt  option gt       lt option style  background-color   FA8072   gt  FA8072 lt  option gt       lt option style  background-color   E9967A   gt  E9967A lt  option gt       lt option style  background-color   FFA07A   gt  FFA07A lt  option gt   lt  select gt   lt script gt  function hello    let d   document getElementById  select    let text   d options d selectedIndex  value  document body style backgroundColor text     lt  script gt   lt  body gt   lt  html gt

User · Answer

I wouldn t really class this as  AJAX   Anyway  something like following should do the trick    document body style backgroundColor    pink

User · Answer

You don t need AJAX for this  just some plain java script setting the background-color property of the body element  like this   document body style backgroundColor     AA0000     If you want to do it as if it was initiated by the server  you would have to poll the server and then change the color accordingly

User · Answer

I agree with the previous poster that changing the color by className is a prettier approach  My argument however is that a className can be regarded as a definition of  why you want the background to be this or that color     For instance  making it red is not just because you want it red  but because you d want to inform users of an error  As such  setting the className AnErrorHasOccured on the body would be my preferred implementation   In css  body AnErrorHasOccured     background   f00      In JavaScript   document body className    AnErrorHasOccured     This leaves you the options of styling more elements according to this className  And as such  by setting a className you kind of give the page a certain state

User · Answer

x000D   x000D  function pink    document body style background    pink     function sky    document body style background    skyblue     x000D   lt p onclick  pink    style  padding 10px background pink  gt Pink lt  p gt   lt p onclick  sky    style  padding 10px background skyblue  gt Sky lt  p gt  x000D   x000D   x000D

User · Answer

This is simple coding for changing background using javascript   lt body onLoad  document bgColor  red   gt

User · Answer

AJAX is getting data from the server using Javascript and XML in an asynchronous fashion  Unless you want to download the colour code from the server  that s not what you re really aiming for   But otherwise you can set the CSS background with Javascript  If you re using a framework like jQuery  it ll be something like this      body   css  background     ccc      Otherwise  this should work   document body style background     ccc

User · Answer

I would prefer to see the use of a css class here  It avoids having hard to read colors   hex codes in javascript   document body className   className

User · Answer

You can change background of a page by simply using   document body style background    000000    I used black as color code   However the below script will change the background of the page after every 3 seconds using setTimeout   function     function                 var colors      0099cc    c0c0c0    587b2e    990000    000000    1C8200    987baa    981890    AA8971    1987FC    99081E                 setInterval function                      var bodybgarrayno   Math floor Math random     colors length                   var selectedcolor   colors bodybgarrayno                      body   css  background  selectedcolor                  3000                READ MOREDEMO

User · Answer

Css approach   If you want to see continuous colour  use this code   body      background-color black      animation  image 10s infinite alternate      animation image 10s infinite alternate      animation image 10s infinite alternate      keyframes image      0   background-color blue    25        background-color red    50       background-color green    75        background-color pink    100       background-color yellow                If you want to see it faster or slower  change 10 second to 5 second etc

User · Answer

Add this script element to your body element  changing the color as desired    x000D   x000D   lt body gt  x000D     lt p gt Hello  World  lt  p gt  x000D     lt script type  text javascript  gt  x000D       document body style backgroundColor     ff0000       red x000D     lt  script gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

This code makes random color for background every second   x000D   x000D  setInterval changeColor 1000   function changeColor      let r   Math random     255     let g   Math random     255     let b   Math random     255        document body style backgroundColor    rgb    r     g     b        x000D   x000D   x000D   I hope helps someone

User · Answer

Css approach   If you want to see continuous colour  use this code   body      background-color black      animation  image 10s infinite alternate      animation image 10s infinite alternate      animation image 10s infinite alternate      keyframes image      0   background-color blue    25        background-color red    50       background-color green    75        background-color pink    100       background-color yellow                If you want to see it faster or slower  change 10 second to 5 second etc

User · Answer

I agree with the previous poster that changing the color by className is a prettier approach  My argument however is that a className can be regarded as a definition of  why you want the background to be this or that color     For instance  making it red is not just because you want it red  but because you d want to inform users of an error  As such  setting the className AnErrorHasOccured on the body would be my preferred implementation   In css  body AnErrorHasOccured     background   f00      In JavaScript   document body className    AnErrorHasOccured     This leaves you the options of styling more elements according to this className  And as such  by setting a className you kind of give the page a certain state

User · Answer

But you would want to configure the body color before the  lt body gt  element exists  That way it has the right color from the get go    lt script gt      var myColor     AAAAAA       document write             lt style gt               body                   background-color    myColor                             lt  style gt            lt  script gt    This you can put in the  lt head gt  of the document or in your js file   Here is a nice color to play with   var myColor        Math random   0xFFFFFF lt  lt 0  toString 16

User · Answer

if you wish to use a button or some other event  just use this in JS   document querySelector  button   addEventListener  click   function     document body style backgroundColor    red

User · Answer

x000D   x000D  function pink    document body style background    pink     function sky    document body style background    skyblue     x000D   lt p onclick  pink    style  padding 10px background pink  gt Pink lt  p gt   lt p onclick  sky    style  padding 10px background skyblue  gt Sky lt  p gt  x000D   x000D   x000D

User · Answer

You can change background of a page by simply using   function changeBodyBg color       document body style background   color      Read more   Changing the Background Color

User · Answer

I wouldn t really class this as  AJAX   Anyway  something like following should do the trick    document body style backgroundColor    pink

User · Answer

I would prefer to see the use of a css class here  It avoids having hard to read colors   hex codes in javascript   document body className   className

User · Answer

Add this script element to your body element  changing the color as desired    x000D   x000D   lt body gt  x000D     lt p gt Hello  World  lt  p gt  x000D     lt script type  text javascript  gt  x000D       document body style backgroundColor     ff0000       red x000D     lt  script gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

I wouldn t really class this as  AJAX   Anyway  something like following should do the trick    document body style backgroundColor    pink

User · Answer

You can change background of a page by simply using   document body style background    000000    I used black as color code   However the below script will change the background of the page after every 3 seconds using setTimeout   function     function                 var colors      0099cc    c0c0c0    587b2e    990000    000000    1C8200    987baa    981890    AA8971    1987FC    99081E                 setInterval function                      var bodybgarrayno   Math floor Math random     colors length                   var selectedcolor   colors bodybgarrayno                      body   css  background  selectedcolor                  3000                READ MOREDEMO

User · Answer

AJAX is getting data from the server using Javascript and XML in an asynchronous fashion  Unless you want to download the colour code from the server  that s not what you re really aiming for   But otherwise you can set the CSS background with Javascript  If you re using a framework like jQuery  it ll be something like this      body   css  background     ccc      Otherwise  this should work   document body style background     ccc

User · Answer

AJAX is getting data from the server using Javascript and XML in an asynchronous fashion  Unless you want to download the colour code from the server  that s not what you re really aiming for   But otherwise you can set the CSS background with Javascript  If you re using a framework like jQuery  it ll be something like this      body   css  background     ccc      Otherwise  this should work   document body style background     ccc

User · Answer

But you would want to configure the body color before the  lt body gt  element exists  That way it has the right color from the get go    lt script gt      var myColor     AAAAAA       document write             lt style gt               body                   background-color    myColor                             lt  style gt            lt  script gt    This you can put in the  lt head gt  of the document or in your js file   Here is a nice color to play with   var myColor        Math random   0xFFFFFF lt  lt 0  toString 16

User · Answer

I would prefer to see the use of a css class here  It avoids having hard to read colors   hex codes in javascript   document body className   className

User · Answer

Or   you can just do background 0    in function draw     0 is the color black

User · Answer

I agree with the previous poster that changing the color by className is a prettier approach  My argument however is that a className can be regarded as a definition of  why you want the background to be this or that color     For instance  making it red is not just because you want it red  but because you d want to inform users of an error  As such  setting the className AnErrorHasOccured on the body would be my preferred implementation   In css  body AnErrorHasOccured     background   f00      In JavaScript   document body className    AnErrorHasOccured     This leaves you the options of styling more elements according to this className  And as such  by setting a className you kind of give the page a certain state

User · Answer

This will change the background color according to the choice of user selected from the drop-down menu    x000D   x000D  function changeBG     x000D    var selectedBGColor   document getElementById  bgchoice   value  x000D    document body style backgroundColor   selectedBGColor  x000D    x000D   lt select id  bgchoice  onchange  changeBG    gt  x000D       lt option gt  lt  option gt  x000D       lt option value  red  gt Red lt  option gt  x000D       lt option value  ivory  gt Ivory lt  option gt  x000D       lt option value  pink  gt Pink lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

I would prefer to see the use of a css class here  It avoids having hard to read colors   hex codes in javascript   document body className   className

User · Answer

I would suggest the following code    lt div id  example  onClick  colorize    gt Click on this text to change the background color lt  div gt   lt script type  text javascript  gt  function colorize     var element   document getElementById  example    element style backgroundColor   800   element style color  white   element style textAlign  center      lt  script gt

User · Answer

Modify the JavaScript property document body style background   For example   function changeBackground color       document body style background   color     window addEventListener  load  function     changeBackground  red         Note  this does depend a bit on how your page is put together  for example if you re using a DIV container with a different background colour you will need to modify the background colour of that instead of the document body

User · Answer

I agree with the previous poster that changing the color by className is a prettier approach  My argument however is that a className can be regarded as a definition of  why you want the background to be this or that color     For instance  making it red is not just because you want it red  but because you d want to inform users of an error  As such  setting the className AnErrorHasOccured on the body would be my preferred implementation   In css  body AnErrorHasOccured     background   f00      In JavaScript   document body className    AnErrorHasOccured     This leaves you the options of styling more elements according to this className  And as such  by setting a className you kind of give the page a certain state

User · Answer

This is simple coding for changing background using javascript   lt body onLoad  document bgColor  red   gt

User · Answer

Alternatively  if you wish to specify the background color value in rgb notation then try  document getElementById  yourid   style backgroundColor    rgb     a         b         c          where a b c are the color values  Example   document getElementById  yourid   style backgroundColor    rgb 224 224 224

User · Answer

Or   you can just do background 0    in function draw     0 is the color black

User · Answer

This will change the background color according to the choice of user selected from the drop-down menu    x000D   x000D  function changeBG     x000D    var selectedBGColor   document getElementById  bgchoice   value  x000D    document body style backgroundColor   selectedBGColor  x000D    x000D   lt select id  bgchoice  onchange  changeBG    gt  x000D       lt option gt  lt  option gt  x000D       lt option value  red  gt Red lt  option gt  x000D       lt option value  ivory  gt Ivory lt  option gt  x000D       lt option value  pink  gt Pink lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

You don t need AJAX for this  just some plain java script setting the background-color property of the body element  like this   document body style backgroundColor     AA0000     If you want to do it as if it was initiated by the server  you would have to poll the server and then change the color accordingly

User · Answer

if you wish to use a button or some other event  just use this in JS   document querySelector  button   addEventListener  click   function     document body style backgroundColor    red

User · Answer

Alternatively  if you wish to specify the background color value in rgb notation then try  document getElementById  yourid   style backgroundColor    rgb     a         b         c          where a b c are the color values  Example   document getElementById  yourid   style backgroundColor    rgb 224 224 224

User · Answer

I wouldn t really class this as  AJAX   Anyway  something like following should do the trick    document body style backgroundColor    pink

User · Answer

I would suggest the following code    lt div id  example  onClick  colorize    gt Click on this text to change the background color lt  div gt   lt script type  text javascript  gt  function colorize     var element   document getElementById  example    element style backgroundColor   800   element style color  white   element style textAlign  center      lt  script gt

User · Answer

You can do it in following ways STEP 1      var imageUrl   URL OF THE IMAGE HERE      var BackgroundColor  RED      what ever color you want   For changing background of BODY  document body style backgroundImage imageUrl    changing bg image document body style backgroundColor BackgroundColor   changing bg color   To change an element with ID  document getElementById  ElementId   style backgroundImage imageUrl document getElementById  ElementId   style backgroundColor BackgroundColor    for elements with same class     var elements   document getElementsByClassName  ClassName           for  var i   0  i  lt  elements length  i                  elements i  style background imageUrl

User · Answer

lt  DOCTYPE html gt   lt html gt   lt body gt   lt select name    id  select  onClick  hello     gt       lt option gt Select lt  option gt       lt option style  background-color   CD5C5C   gt  CD5C5C lt  option gt       lt option style  background-color   F08080   gt  F08080 lt  option gt       lt option style  background-color   FA8072   gt  FA8072 lt  option gt       lt option style  background-color   E9967A   gt  E9967A lt  option gt       lt option style  background-color   FFA07A   gt  FFA07A lt  option gt   lt  select gt   lt script gt  function hello    let d   document getElementById  select    let text   d options d selectedIndex  value  document body style backgroundColor text     lt  script gt   lt  body gt   lt  html gt

User · Answer

You don t need AJAX for this  just some plain java script setting the background-color property of the body element  like this   document body style backgroundColor     AA0000     If you want to do it as if it was initiated by the server  you would have to poll the server and then change the color accordingly

User · Answer

You can do it in following ways STEP 1      var imageUrl   URL OF THE IMAGE HERE      var BackgroundColor  RED      what ever color you want   For changing background of BODY  document body style backgroundImage imageUrl    changing bg image document body style backgroundColor BackgroundColor   changing bg color   To change an element with ID  document getElementById  ElementId   style backgroundImage imageUrl document getElementById  ElementId   style backgroundColor BackgroundColor    for elements with same class     var elements   document getElementsByClassName  ClassName           for  var i   0  i  lt  elements length  i                  elements i  style background imageUrl

User · Answer

Modify the JavaScript property document body style background   For example   function changeBackground color       document body style background   color     window addEventListener  load  function     changeBackground  red         Note  this does depend a bit on how your page is put together  for example if you re using a DIV container with a different background colour you will need to modify the background colour of that instead of the document body

User · Answer

Modify the JavaScript property document body style background   For example   function changeBackground color       document body style background   color     window addEventListener  load  function     changeBackground  red         Note  this does depend a bit on how your page is put together  for example if you re using a DIV container with a different background colour you will need to modify the background colour of that instead of the document body

[javascript] How do I change the background color with JavaScript?

Examples related to javascript

Examples related to css