Question 173407 in Javascript Question posted in
A very good W3school tutorial can be found here.

How can I change the background color of a <div> element using JavaScript?

How would I change the color of the tag

I’m trying to make a dark mode bookmarklet to cover all of the html elements change

document.body.style.background = 'black';

This changes the color of the body so what would I do for

I tried

document.body.style.background = 'black';
document.body.style.color = 'white';
document.div.style.background = 'black';
document.div.style.color = 'white';

but I cant seem to get change the color of the div

Tags:

4

Answers


  1. 0

    if the div has an id, you can do this:

    document.getElementById('your-div-id').style.backgroundColor = 'black';
document.getElementById('your-div-id').style.color = 'white';
    <div id="your-div-id">
Dark Mode
</div>
    Login or Signup to reply.
  2. 0

    First you need to select the elements, then you can apply styling on that. Here is a an example snippet:-

    const body = document.querySelector('body');
// Give background color to body element
body.style.backgroundColor = 'red';

const div = document.querySelector('div');
// Give text color to div element
div.style.color = 'white';
    <body>
<div>Hey I am here</div>
</body>

    I used querySelector() to select the elements in the above example. There are many articles that can explain how to select the elements from DOM.

    Login or Signup to reply.
  3. 0

    A better solution would be to apply a separate class for dark mode:

    document.querySelector('button').onclick = () => document.body.classList.toggle('dark');
    body {
  min-height: 100vh;
  margin: 0;
}

body.dark {
  color: #fff;
  background-color: #000;
}
    Lorem ipsum dolor.
<div>Lorem ipsum dolor.</div>
<button>Toggle Dark Mode</button>
    Login or Signup to reply.
  4. 0

    You can’t access div elements this way "document.div".
    You must select the element(s) you want to modify.
    If you want to modify a single element you must select it with document.getElementById("id")
    or document.querySelector("") select by "#id" or class ".className" or tag "tagName".
    To modify several elements you must select them all:
    document.querySelectorAll()

    You can see all the examples below.

    // Get one div by "id"
const divId = document.querySelector("#id")
// Select all divs
const allDiv = document.querySelectorAll("div")
// Selects all divs with a specific class
const greyDivs = document.querySelectorAll(".grey")

document.body.style.background = 'black';
// Iterate through the div array with the forEach() function
allDiv.forEach((div) => {
  // Assign background and color for each div
  div.style.background = '#606060';
  div.style.color = "white"
})

divId.style.background = 'red';
divId.style.color = "yellow"

// Same procedure for divs select by "class name"
greyDivs.forEach((div) => {
  div.style.background = '#303030';
  div.style.color = "#ff4d4d"
})
    div {margin-top: 15px;}
    <div id="id">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus reiciendis temporibus sed deserunt eos perferendis ipsum consectetur doloribus, eaque voluptatem numquam cum doloremque rem nisi. Libero nam laborum est mollitia!
</div>
<div class="grey">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis minima, tenetur ut accusamus autem. Natus ducimus nihil saepe nemo minus quos earum, ex eos est et beatae repudiandae qui molestias.
</div>
<div class="grey">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero voluptates sed voluptatem laboriosam nisi et ea numquam earum excepturi perspiciatis? Harum eius beatae accusamus earum, voluptatum sit maiores fugit minus.
</div>
<div class="grey">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, officiis, error! Ea eos ab, et architecto officiis minima. Placeat, quos quas doloribus libero, porro earum culpa voluptatem corporis consectetur fugit!
</div>
<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita perspiciatis cumque atque vel reiciendis, quos totam repudiandae iusto unde, deserunt a, omnis magni. Asperiores officia quisquam cum, facere magnam itaque.
</div>
<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus iure minus sequi, a sapiente soluta corrupti et facilis hic. Accusamus impedit non expedita aperiam cum, dolore maxime provident quaerat rerum?
</div>
<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus possimus necessitatibus facilis vitae unde, assumenda nisi quam quod eligendi iste reiciendis vero, quae ipsa totam at deleniti nostrum aperiam et.
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search