How to get the background color of a clicked division using jQuery ? - GeeksforGeeks

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="https://code.jquery.com/jquery-3.3.1.min.js">  </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:
gabaa406
jQuery-Basics
jQuery-Methods
jQuery-Questions
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
jQuery | ajax() Method
How to prevent Body from scrolling when a modal is opened using jQuery ?
How to get the value in an input text box using jQuery ?
QR Code Generator using HTML, CSS and jQuery
jQuery UI | Date Picker
Installation of Node.js on Linux
Roadmap to Become a Web Developer in 2022
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?