How To Set Background Color In Java Window

108

There are a few means you tin modify the background colour of an HTML Chemical element dynamically in JavaScript.

Using style.backgroundColor property
Using ClassList.add together()
Using setAttribute()
Change background colour of a div
Modify background color dynamically on button click

1. Using style.backgroundColor Belongings

You can employ the style.backgroundColor property directly in JavaScript to alter a groundwork color of an HTML element.

The below example will change the background color of the body chemical element to red as before long as the HTML document loads on the browser.

This changes the background colour of the entire page to scarlet.

          window.addEventListener('load', () => {   document.torso.style.backgroundColor = 'ruddy'; });

Try it out

See the Pen Change Background Color Using JavaScript #ane by SoftAuthor (@softauthor) on CodePen.

two. Using ClassList.add together() Method

Yous tin can besides modify the background color of an HTML element past calculation an external CSS rule which tin be specified inside mode tags or a divide CSS file.

In this case .bg-color{} which has a single property background-colour:red;

          .bg-color {   background-color:cherry-red; }

Then, add together the .bg-color class to the trunk HTML element when the page loads using the classList.add() method.

          window.addEventListener("load", () => {   document.torso.classList.add("bg-color"); });

This approach is cleaner than the first one because…now you tin can toggle the background colour of the element past but adding or removing the .bg-color CSS course.

Try it out

See the Pen Change Background Color Using JavaScript #ii by SoftAuthor (@softauthor) on CodePen.

3. Using setAttribute() method

Alternatively, you can likewise apply the setAttribute() method to modify the background colour of the chemical element instead of using the classList.add() method.

The setAttribute() method takes two arguments:

Attribute name: class
Attribute value: bg-color

          window.addEventListener("load", () => {   certificate.torso.setAttribute("course" , "bg-color"); });

Endeavour information technology out.

Run into the Pen Alter Groundwork Color Using JavaScript #three – setAttribute() by SoftAuthor (@softauthor) on CodePen.

4. Alter Background Color Of A Div

Instead of changing the groundwork color of an entire folio, let'southward change a div background color.

Here is a unproblematic HTML markup.

index.html

          <div id="box"> </div>

Here is the CSS style for the box chemical element.

way.css

          html, trunk {   height:100%;   brandish:flex;   justify-content:center;   align-items:center; }   #box {   width:100px;   height:100px;   background:#32bacf; }  .bg-color {   background-color:reddish; }

Now alter the groundwork color of the box div element from blue color (#32bacf) that I've set inside #box CSS class to scarlet color using .bg-color CSS class inside JavaScript.

Inside the folio load result, get a DOM reference of the div element using its id box.

          const box = document.getElementById("box");  window.addEventListener("load", () => {     box.setAttribute("course", "bg-color"); // DON'T WORK });

Unfortunatley, the above code won't work...

That'due south because when you lot add a unlike background color to id CSS selector and class CSS selector that are attached to the aforementioned HTML element, the background colour specified within the id CSS selector takes precedence.

Thats why the background colour remains bluish even later on adding the .bg-color class to the chemical element.

In this case, y'all demand to use the mode.backgroundColor holding to override the background color specificed in the #box CSS selector.

          window.addEventListener("load", () => {   box.style.backgroundColor = "reddish"; // IT WORKS });

Attempt information technology out

See the Pen Alter Background Color Using JavaScript #3 – Div past SoftAuthor (@softauthor) on CodePen.

v. Change Background Color On Push button Click

Let's create 4 buttons and have each represent a different color inside a div with an id push button-group.

Modify the groundwork color of the folio dynamically depending on which button is clicked using JavaScript.

          <div id="push-grouping">    <button value="red">Red</button>    <push value="bluish">Blue</button>    <push value="light-green">Green</button>    <button value="xanthous">Yellow</button> </div>

As you can see, each button has a value attribute with colour name.

Use the value attribute to change the background colour of the page on button click.

          * {     margin: 0;     padding: 0;     font-family: Arial, Helvetica, sans-serif;     box-sizing: edge-box; }   torso {     height: 100vh;     brandish: flex;     align-items: heart;     justify-content: heart;     background-color:grayness; }  #button-group {     background: black;     padding: 20px; }  button {     padding: 10px;     font-size: 1.1em;     groundwork: white;     color: black;     border: none;     border-radius: 10px;     border: 1px solid rgba(0, 0, 0, 0.2);     cursor: pointer; }  push:hover {     background: rgba(255, 255, 255, 0.9); }

Side by side, adhere a click effect to the push button-grouping div chemical element.

Check to run across if the clicked element is a button.

If information technology is a push, alter the background color of the body tag to the clicked button color, based on its value attribute.

You lot can go the value atribute from the event object – e.target.value.

          const buttonGroup = certificate.getElementById("button-group");  const buttonGroupPressed = (e) => {   const isButton = east.target.nodeName === 'BUTTON';   if(!isButton) {      return    }   document.body.style.backgroundColor = due east.target.value;   e.target.style.backgroundColor =  e.target.value;    }  buttonGroup.addEventListener('click', buttonGroupPressed);

Finally, change the groundwork color of the clicked push to the color that the button represents, again based on its value attribute.