• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

210
Views
Can't set attribute of document.documentElement;

I have following code to set the dark mode for the document.body

function myFunction() {
  var element = document.body;
  element.classList.toggle("dark-mode");
}
.dark-mode {
  background-color: black;
  color: white;
}
<label class="switch">
  <input onclick="myFunction()" type="checkbox">
  <span class="slider round"></span>
</label>

If I set the document.body to document.documentElement it does not work. Does someone know how to fix it for the root element of the HTML? I also tried document.querySelector(":root");.

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

So the code as you have it seem to be working fine, both document.body and document.documentElement, so the issue might be related on where and how you are importing de CSS.

With document.documentElement

<style>
    .dark-mode {
  background-color: black;
  color: white;
}
</style>
<label for="toggle" class="switch">
    Toggle
    <input onclick="myFunction()" type="checkbox">
    <span class="slider round"></span>
  </label>
  
  
  <script>
    function myFunction() {
      var element = document.documentElement;
      element.classList.toggle("dark-mode");
    }
  </script>

With document.body

<style>
    .dark-mode {
  background-color: black;
  color: white;
}
</style>
<label class="switch">
    Toggle
    <input onclick="myFunction()" type="checkbox">
    <span class="slider round"></span>
  </label>
  
  
  <script>
    function myFunction() {
      var element = document.body;
      element.classList.toggle("dark-mode");
    }
  </script>

But also as a general recommendation de input shouldn't be wrapped in the label tag.

<style>
    .dark-mode {
  background-color: black;
  color: white;
}
</style>
<label for="toggle" class="switch">
    Toggle
  </label>
  <input id="toggle" name="toggle" onclick="myFunction()" type="checkbox">
    <span class="slider round"></span>
  
  
  <script>
    function myFunction() {
      var element = document.body;
      element.classList.toggle("dark-mode");
    }
  </script>

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error