Как изменить background color через js

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.

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 < elements.length; i++) {
            elements[i].style.background=imageUrl;
        }

answered Feb 26, 2015 at 5:10

I wouldn’t really class this as «AJAX». Anyway, something like following should do the trick:

document.body.style.backgroundColor = 'pink';

answered Oct 13, 2008 at 14:27

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.

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;

This will change the background color according to the choice of user selected from the drop-down menu:

function changeBG() {
  var selectedBGColor = document.getElementById("bgchoice").value;
  document.body.style.backgroundColor = selectedBGColor;
}

<select id="bgchoice" onchange="changeBG()">
    <option></option>
    <option value="red">Red</option>
    <option value="ivory">Ivory</option>
    <option value="pink">Pink</option>
</select>

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";
});

answered Feb 22, 2018 at 11:14

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)';

answered Nov 12, 2018 at 5:13

Here are 2 ways to Change Background Color Using Javascript

1. To change background color with javascript you can apply
   style.background or style.backgroundColor on the element you want to change background for.

   The below example changes the background color of the body when you
   click an element using style.background property.

function pink(){ document.body.style.background = "pink"; }
function sky(){ document.body.style.background = "skyblue"; }

<p onclick="pink()" style="padding:10px;background:pink">Pink</p>
<p onclick="sky()" style="padding:10px;background:skyblue">Sky</p>

1. Another approach could be by adding a CSS class using
   javascript
   that gives a background to the element it is attached.

   You can see more ways to add class using javascript but here you can
   simply use classList.add() property.

       function addClass(yourClass){
           document.body.classList.remove("sky", "pink");
           document.body.classList.add(yourClass);
       }

       .pink {
           background: pink;
       }
   
       .sky {
           background: skyblue;
       }

       <p onclick="addClass('pink')" style="padding:10px;background:pink">Pink</p>
       <p onclick="addClass('sky')" style="padding:10px;background:skyblue">Sky</p>

Add this script element to your body element, changing the color as desired:

<body>
  <p>Hello, World!</p>
  <script type="text/javascript">
     document.body.style.backgroundColor = "#ff0000";  // red
  </script>
</body>

answered Feb 1, 2011 at 17:41

so you can done very easily by just calling a function like

 function changeBg()
    {
      document.body.style.color.backgroundColor="#ffffff";

    }

answered Sep 29, 2021 at 6:55

I would suggest the following code:

<div id="example" onClick="colorize()">Click on this text to change the
background color</div>
<script type='text/javascript'>
function colorize() {
var element = document.getElementById("example");
element.style.backgroundColor='#800';
element.style.color='white';
element.style.textAlign='center';
}
</script>

You can change background of a page by simply using:

function changeBodyBg(color){
    document.body.style.background = color;
}

Read more @ Changing the Background Color

answered Mar 28, 2018 at 5:11

But you would want to configure the body color before the <body> element exists. That way it has the right color from the get go.

<script>
    var myColor = "#AAAAAA";
    document.write('
        <style>
            body{
                background-color: '+myColor+';
            }
        </style>
    ');
</script>

This you can put in the <head> of the document or in your js file.

Here is a nice color to play with.

var myColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);

answered Oct 2, 2013 at 19:27

It can be achieved using

document.body.style.color.backgroundColor="#000000";

answered Jun 23, 2022 at 8:27

This code makes random color for background every second.

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} )`;
}

I hope helps someone.❤

answered Feb 12, 2021 at 14:55

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.

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 < elements.length; i++) {
            elements[i].style.background=imageUrl;
        }

answered Feb 26, 2015 at 5:10

I wouldn’t really class this as «AJAX». Anyway, something like following should do the trick:

document.body.style.backgroundColor = 'pink';

answered Oct 13, 2008 at 14:27

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.

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;

This will change the background color according to the choice of user selected from the drop-down menu:

function changeBG() {
  var selectedBGColor = document.getElementById("bgchoice").value;
  document.body.style.backgroundColor = selectedBGColor;
}

<select id="bgchoice" onchange="changeBG()">
    <option></option>
    <option value="red">Red</option>
    <option value="ivory">Ivory</option>
    <option value="pink">Pink</option>
</select>

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";
});

answered Feb 22, 2018 at 11:14

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)';

answered Nov 12, 2018 at 5:13

Here are 2 ways to Change Background Color Using Javascript

1. To change background color with javascript you can apply
   style.background or style.backgroundColor on the element you want to change background for.

   The below example changes the background color of the body when you
   click an element using style.background property.

function pink(){ document.body.style.background = "pink"; }
function sky(){ document.body.style.background = "skyblue"; }

<p onclick="pink()" style="padding:10px;background:pink">Pink</p>
<p onclick="sky()" style="padding:10px;background:skyblue">Sky</p>

1. Another approach could be by adding a CSS class using
   javascript
   that gives a background to the element it is attached.

   You can see more ways to add class using javascript but here you can
   simply use classList.add() property.

       function addClass(yourClass){
           document.body.classList.remove("sky", "pink");
           document.body.classList.add(yourClass);
       }

       .pink {
           background: pink;
       }
   
       .sky {
           background: skyblue;
       }

       <p onclick="addClass('pink')" style="padding:10px;background:pink">Pink</p>
       <p onclick="addClass('sky')" style="padding:10px;background:skyblue">Sky</p>

Add this script element to your body element, changing the color as desired:

<body>
  <p>Hello, World!</p>
  <script type="text/javascript">
     document.body.style.backgroundColor = "#ff0000";  // red
  </script>
</body>

answered Feb 1, 2011 at 17:41

so you can done very easily by just calling a function like

 function changeBg()
    {
      document.body.style.color.backgroundColor="#ffffff";

    }

answered Sep 29, 2021 at 6:55

I would suggest the following code:

<div id="example" onClick="colorize()">Click on this text to change the
background color</div>
<script type='text/javascript'>
function colorize() {
var element = document.getElementById("example");
element.style.backgroundColor='#800';
element.style.color='white';
element.style.textAlign='center';
}
</script>

You can change background of a page by simply using:

function changeBodyBg(color){
    document.body.style.background = color;
}

Read more @ Changing the Background Color

answered Mar 28, 2018 at 5:11

But you would want to configure the body color before the <body> element exists. That way it has the right color from the get go.

<script>
    var myColor = "#AAAAAA";
    document.write('
        <style>
            body{
                background-color: '+myColor+';
            }
        </style>
    ');
</script>

This you can put in the <head> of the document or in your js file.

Here is a nice color to play with.

var myColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);

answered Oct 2, 2013 at 19:27

It can be achieved using

document.body.style.color.backgroundColor="#000000";

answered Jun 23, 2022 at 8:27

This code makes random color for background every second.

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} )`;
}

I hope helps someone.❤

answered Feb 12, 2021 at 14:55

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.

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 < elements.length; i++) {
            elements[i].style.background=imageUrl;
        }

answered Feb 26, 2015 at 5:10

I wouldn’t really class this as «AJAX». Anyway, something like following should do the trick:

document.body.style.backgroundColor = 'pink';

answered Oct 13, 2008 at 14:27

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.

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;

This will change the background color according to the choice of user selected from the drop-down menu:

function changeBG() {
  var selectedBGColor = document.getElementById("bgchoice").value;
  document.body.style.backgroundColor = selectedBGColor;
}

<select id="bgchoice" onchange="changeBG()">
    <option></option>
    <option value="red">Red</option>
    <option value="ivory">Ivory</option>
    <option value="pink">Pink</option>
</select>

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";
});

answered Feb 22, 2018 at 11:14

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)';

answered Nov 12, 2018 at 5:13

Here are 2 ways to Change Background Color Using Javascript

1. To change background color with javascript you can apply
   style.background or style.backgroundColor on the element you want to change background for.

   The below example changes the background color of the body when you
   click an element using style.background property.

function pink(){ document.body.style.background = "pink"; }
function sky(){ document.body.style.background = "skyblue"; }

<p onclick="pink()" style="padding:10px;background:pink">Pink</p>
<p onclick="sky()" style="padding:10px;background:skyblue">Sky</p>

1. Another approach could be by adding a CSS class using
   javascript
   that gives a background to the element it is attached.

   You can see more ways to add class using javascript but here you can
   simply use classList.add() property.

       function addClass(yourClass){
           document.body.classList.remove("sky", "pink");
           document.body.classList.add(yourClass);
       }

       .pink {
           background: pink;
       }
   
       .sky {
           background: skyblue;
       }

       <p onclick="addClass('pink')" style="padding:10px;background:pink">Pink</p>
       <p onclick="addClass('sky')" style="padding:10px;background:skyblue">Sky</p>

Add this script element to your body element, changing the color as desired:

<body>
  <p>Hello, World!</p>
  <script type="text/javascript">
     document.body.style.backgroundColor = "#ff0000";  // red
  </script>
</body>

answered Feb 1, 2011 at 17:41

so you can done very easily by just calling a function like

 function changeBg()
    {
      document.body.style.color.backgroundColor="#ffffff";

    }

answered Sep 29, 2021 at 6:55

I would suggest the following code:

<div id="example" onClick="colorize()">Click on this text to change the
background color</div>
<script type='text/javascript'>
function colorize() {
var element = document.getElementById("example");
element.style.backgroundColor='#800';
element.style.color='white';
element.style.textAlign='center';
}
</script>

You can change background of a page by simply using:

function changeBodyBg(color){
    document.body.style.background = color;
}

Read more @ Changing the Background Color

answered Mar 28, 2018 at 5:11

But you would want to configure the body color before the <body> element exists. That way it has the right color from the get go.

<script>
    var myColor = "#AAAAAA";
    document.write('
        <style>
            body{
                background-color: '+myColor+';
            }
        </style>
    ');
</script>

This you can put in the <head> of the document or in your js file.

Here is a nice color to play with.

var myColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);

answered Oct 2, 2013 at 19:27

It can be achieved using

document.body.style.color.backgroundColor="#000000";

answered Jun 23, 2022 at 8:27

This code makes random color for background every second.

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} )`;
}

I hope helps someone.❤

answered Feb 12, 2021 at 14:55