Modify the color with JavaScript by manipulating the Document Object Model (DOM)

Question

Modify the color with JavaScript by manipulating the Document Object Model (DOM)

 const elementBox = document.getElementsByClassName('box');
 let colorAsStringVariable = '#FEC6F0';
 let colorAsNumberVariable = #FEC6F0;
    Array.from(elementBox).forEach((element) =>{
        element.style.backgroundColor = colorAsStringVariable;
        element.style.backgroundColor = colorAsNumberVariable;
    });

I have two variables storing a hex-color value as a string and a number. I then use these variables as values for CSS properties on the elements with the class 'box'. Can someone explain why this code is not working for me?

javascript html css frontend

Answer 1

Answer №1

Modifying the style attribute ultimately results in a CSS string. To specify colors, you can use formats such as '#ffffff' or 'rgb(255,255,255)'. However, plain numbers cannot be used for this purpose.

For further information, please refer to: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

 const box = document.getElementsByClassName('box');
 let colorAsString = '#FEC6F0';
    Array.from(box).forEach((element) =>{
        element.style.backgroundColor = colorAsString;
    });

.box {
  width:100px;
  height:100px;
  margin:10px;
  background-color:gray;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Answer 2

Modifying the style attribute ultimately results in a CSS string. To specify colors, you can use formats such as '#ffffff' or 'rgb(255,255,255)'. However, plain numbers cannot be used for this purpose.

For further information, please refer to: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

 const box = document.getElementsByClassName('box');
 let colorAsString = '#FEC6F0';
    Array.from(box).forEach((element) =>{
        element.style.backgroundColor = colorAsString;
    });

.box {
  width:100px;
  height:100px;
  margin:10px;
  background-color:gray;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Answer 3

Answer №2

Success!

<html>
 <body>
     <p id="p">
       Click me to change my color
     </p>
    <script>
      onclick = function(){
         document.getElementById("p").style.color = "#fff";

        document.getElementById("p").style.background = "#000";
      }
    </script>
  </body>
  </html>

Answer 4

Success!

<html>
 <body>
     <p id="p">
       Click me to change my color
     </p>
    <script>
      onclick = function(){
         document.getElementById("p").style.color = "#fff";

        document.getElementById("p").style.background = "#000";
      }
    </script>
  </body>
  </html>

Modify the color with JavaScript by manipulating the Document Object Model (DOM)

Answer №1

Answer №2

Similar questions

When an ad call is successful in ajax, the response includes the usage of document

What is the @page rule in Material-UI?

Guide on Adding a Map to a List in JavaScript

How to retrieve an element using a dynamically generated class name in Vue.js

Unable to insert string into evaluated array

Looking for a solution to a problem with your vertical CSS/jQuery dropdown menu

Is there a way to extract the headers as key-value pairs when converting a csv file to json using the csv-parser from the csv module?

What methods do current web browsers utilize to implement the JS Array, particularly when it comes to adding

Modify the class name of the clicked button and another button when a button is clicked in ReactJs

Server-side WebSocket doesn't appear to be successfully transmitting messages to the frontend

Issues encountered when packaging React Native iOS application with CocoaPods

How to Retrieve Video Length using AJAX in the YouTube API

Custom override of SX prop classes with Material-UI theme

Angular version 11 fails to locate the lazy module

The divider amidst the cards zapping like electricity

Converting an array of arrays to an array of objects in a React application

Different language implementations of AES ECB mode yield varying outputs

What is the best way to refine my selection of elements within a jQuery object?

Express, the mongoose package delivers a response of an empty array

Is it possible to display a div when hovering over it and have it remain visible until