Changing color text using button

Question

I tried changing text color of my html using javascript . After few tries I realised i cant change the color if i am changing it in css. So basically it means CSS is executed at the end?? and how can i change the color of the text after clicking the button if i am changing it in css as well? Sorry i am new

function changecol()
      { 
          var html=document.body;

          html.style.backgroundColor='black';
          html.style.color='white';

      }

Expected all the lines in my html to turn white but only those where i have not applied css became white

Answer 1

This is a jquery approach, that will change your color on button click:

 $("#butt").on("click",function(){ $(".color").css("background-color","red"); $(".color").css("color","white"); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="color">HALLO</div> <button id="butt">Change Color</button> 

Answer 2

You are probably dealing with an inheritance problem. In your case, you are putting a style on the body, and the only elements that inherit styles from the body are ones without their own style. To solve this, I recommend applying the style directly to each element.

Try this:

function changecol(){
  document.body.style.backgroundColor='black';
  document.body.style.color='white';

  // change background color of each element 
  var elements = document.querySelectorAll('*');
  for(let i=0;i<elements.length;i++){
    elements[i].style.backgroundColor='black';
    elements[i].style.color='white';
  }
}