Pressing a button to alter the text color

Question

Pressing a button to alter the text color

While experimenting, I attempted to alter the text color of my HTML using JavaScript. After a few attempts, I came to the realization that I cannot change the color if I am already changing it in CSS. Does this mean CSS is executed at the end? Also, how can I change the color of the text after clicking a button if I am also changing it in CSS? I apologize for my lack of experience in this area.

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

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

      }

I expected all the lines in my HTML to turn white, but only those where I had not applied CSS became white.

javascript html css

Answer 1

Answer №1

Here is a simple jQuery method to change the background color and text color when a button is clicked:

$("#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">HELLO</div>
<button id="butt">Change Color</button>

Answer 2

Here is a simple jQuery method to change the background color and text color when a button is clicked:

$("#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">HELLO</div>
<button id="butt">Change Color</button>

Answer 3

Answer №2

It seems like the issue you're facing could be related to inheritance. Specifically, when you set a style on the body element, only elements that do not have their own styles will inherit it. To resolve this, one solution is to apply the style directly to each individual element.

Here's a suggestion:

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

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

Answer 4

It seems like the issue you're facing could be related to inheritance. Specifically, when you set a style on the body element, only elements that do not have their own styles will inherit it. To resolve this, one solution is to apply the style directly to each individual element.

Here's a suggestion:

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

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

Pressing a button to alter the text color

Answer №1

Answer №2

Similar questions

Creating an AngularJS service or factory that dynamically compiles HTML using a variable from the $scope

executing npm tasks concurrently

Encountering an issue while attempting to fetch a value from a nested object property with VueJS Interpolation

reasons why the console is not logging updated states

Navigating through Vue Router with Dynamic Imports and Guards

Converting the stage object to JSON format and incorporating it into an HTML5 environment using

Jquery Error in Bootstrap and DataTables Integration

What is the proper way to utilize the value of a Node.js promise in a different function?

A guide on how to examine the array index within a nested array

Encountering a Typescript error while attempting to remove an event that has a FormEvent type

Ways to eliminate the design from a previously selected list item

Struggling to get the AJAX code functioning correctly

Receiving Array Data from JSON and Listing Results

Customizing Marker Clusters with ui-leaflet: A guide on changing marker cluster colors

Consolidate list: Make sure to leave only the currently active item open

What is the process of invoking a secondary "external" function with Nodejs, Expressjs, and bluebird?

Customizing the active link color in Bootstrap dropdown menus

Tips for managing onClick events within a conditional component

What is preventing me from executing this function more than once?

Retrieve information using Observables just once in Angular 2