How to return the background color of an element with JavaScript DOM?

Javascript Web Development Front End Technology

In this tutorial, we will explore the method by which we can get the background color of an element with JavaScript. There are many scenarios where we may want to get the color of an element on the page, and we will see how to achieve that easily using inbuilt methods provided by JavaScript.

We cannot only retrieve the color of the color we can also set the color of an element using the same function. To achieve this, we will be using a modification of the same function.

Browser Support

Chrome Browser − Version 1.0 and above.
Edge Browser − Version 12 and above.
Internet Explorer − Version 4.0 and above.
Firefox Browser − Version 1.0 and above.
Safari Browser − Version 1.0 and above.
Opera Browser − Version 3.5 and above.

Style.backgroundColor is an in built function in the style library which we can use to set a specific color for an element and retrieve the color of an element as well.

Syntax

object.style.backgroundColor = "color|transparent|initial|inherit"

It can take the following types of four parameters namely −

color − This is responsible for the background color.
transparent − The background color will be transparent.
initial − Changes and sets the current property as the default property.
inherit − It inherits its property from its parent’s element and sets it to it.

Example 1

Let us take a look at how to set a color for an element using the in-built function backgroundColor from the style library.


<!DOCTYPE html>
<html>
<body>
<button onclick="display()">Click to Set background Color</button>
   <script>
      function display() {
         document.body.style.backgroundColor = "blue";
      }
   </script>
</body>
</html>

In the above code we created a button which when clicked will call another function with the name display which will use the backgroundColor from the style library to set the color of that back ground to blue.

Example 2

Let us take a look at another example where we will only change the color of a div or element and not the whole screen.


<!DOCTYPE html>
<html>
<body>
   <h1 style="color:black;">TUTORIAL POINT</h1>
   <button onclick="change_color()">Click</button>
   <div id="my-div"
      style= "width: 250px; height: 100px; background-color: cyan;">
      <h1>TutorialPoint</h1>
   </div>
   <script>
      function change_color() {
         document.getElementById("my-div").style.backgroundColor =
         "purple";
      }
   </script>
</body>
</html>

In the above code we created a div with some size and set the current background color to cyan and a button which when clicked will call another function with the name change_color which will as the name suggests change the background color by using the backgroundColor from the style library to set the color of that div back ground to purple from cyan.

Style.backgroundColor is an in built function in the style library which we can use to set a specific color for an element and retrieve the color of an element as well.

Example 3

Let us take a look at how we can retrieve a color from an element present in the web page.


<!DOCTYPE html>
<html>
<body>
   <h1 style="color:black;">TUTORIAL POINT</h1>
   <button onclick="name_color()">Click</button>
   <div id="my-div"
      style= "width: 250px; height: 100px; background-color: cyan;">
      <h1>TutorialPoint</h1>
   </div>
   <script>
      function name_color() {
         document.write(document.getElementById("my-div").style.backgroundColor)
      }
   </script>
</body>
</html>

In the above code we created a div with some size and set the current background color to cyan and a button which when clicked will call another function with the name name_color which will as the name suggests tell us the background color using the backgroundColor from the style library to retrieve the color of that div and writing the color on the screen using document.write.

Conclusion

In this tutorial, we saw how we can use a function from the libarty style namely backgroundColor to set a background color for an element present in the web page, we can also use backgroundColor to return or retrieve the background color that has been set for a specific element present in the web page. Combining the style.backgroundColor with a function we can also change the color of the element when a button is pressed.

Prabhdeep Singh

Updated on: 07-Nov-2022

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started