Skip to content
Related Articles

Related Articles

Improve Article
How to get the background color of a clicked division using jQuery ?
  • Last Updated : 05 Jun, 2021

In this article, we will learn how to get the background color of a clicked division using jQuery.

Approach: All the divisions on the page are first selected using a common selector and a click binding is applied to trigger the color detection using the click() method. The division that is then currently clicked can then be found out by using this as the selector.

The css() method in jQuery is used for getting and setting the computed styles of the element it is used on. It accepts two parameters where the first parameter defines the style for which we need to get or set the style, and the second parameter defines the value it has to be set. We can use this method to get the current color by passing the parameter as “background-color”  for getting the current background color. This can then be shown as a text in RGB values or assigned to another element.

Syntax: 
 

$(".box").click(function () {

  // Get the current background color
  let current_color = 
    $(this).css("background-color");

  // Show the color text
  $(".current-color-text").text(current_color);

  // Show the color itself
  $(".current-color").css(
    "background-color", current_color
  );
});

 



The below example illustrates the above approach:

 

Example:

 

HTML




<html>
<head>
  <script src=
  </script>
  <style>
    .container {
      display: flex;
    }
 
    .box {
      height: 125px;
      width: 125px;
      margin-right: 16px;
    }
 
    .yellowgreen-bg {
      background-color: yellowgreen;
    }
 
    .orangered-bg {
      background-color: orangered;
    }
 
    .slateblue-bg {
      background-color: slateblue;
    }
 
    .gold-bg {
      background-color: gold;
    }
 
    .current-color {
      height: 75px;
      width: 75px;
    }
  </style>
</head>
 
<body>
  <h1 style="color: green">
    GeeksforGeeks
  </h1>
  <b>How to get the background color of a
    clicked division using jQuery?</b>
   
<p>
    Click on any division to get its
    background color
  </p>
 
 
 
  <div class="container">
     
    <!-- Define the division's with
    background color -->
    <div class="box yellowgreen-bg"></div>
    <div class="box orangered-bg"></div>
    <div class="box slateblue-bg"></div>
    <div class="box gold-bg"></div>
  </div>
 
   
<p>The clicked division's background color is:</p>
 
  <!-- Show the color and the text -->
  <div class="current-color"></div>
  <b class="current-color-text"></b>
 
  <script>
    $(".box").click(function () {
 
      // Get the current background color
      // using the css() method
      let current_color =
          $(this).css("background-color");
 
      // Show the color text
      $(".current-color-text").text(
        current_color
      );
 
      // Show the color itself
      $(".current-color").css(
        "background-color", current_color
      );
    });
  </script>
</body>
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :