How to get the background color of a clicked division using jQuery ? Last Updated : 02 Nov, 2022 Comments Improve Suggest changes Like Article Like Report 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 background color of element let current_color = $(this).css("background-color"); // Show the color text on the same box $(".current-color-text").text( current_color ); $(".box").html(''); $(this).html('<b class="current-color-text">'+current_color+'</b>'); }); 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> <script> $(".box").click(function () { // Get background color of element let current_color = $(this).css("background-color"); // Show the color text on the same box $(".current-color-text").text( current_color ); $(".box").html(''); $(this).html('<b class="current-color-text">'+current_color+'</b>'); }); </script> </body> </html> Output: Color is shown on the same box after clicking Comment More infoAdvertise with us Next Article How to get the background color of a clicked division using jQuery ? S sayantanm19 Follow Improve Article Tags : Web Technologies JQuery jQuery-Basics jQuery-Methods jQuery-Questions +1 More Similar Reads How to get styles of a clicked division using jQuery ? In this article, we will learn how to get the styles (width, height, text color, and background color) of a clicked division using jQuery. Approach: The css() method is used to get the CSS property values of the selected element in jQuery. We use the css() method in jQuery that takes an array of nam 2 min read How to Double click on a div element to toggle background color in jQuery ? In this article, we will see how to make a double click event on a paragraph element to toggle background color in jQuery. To toggle the background color of a div element on double-click, toggleClass() method is used. The toggleClass() method is used to toggle or change the class which attached with 1 min read How to change background color of paragraph on double click using jQuery ? In this article, we will see how to change the background color of a paragraph using jQuery. To change the background color, we use on() method. The on() method is used to listen the event on an element. Here we are going to use dblclick event. For changing the background color we are going to use c 2 min read How to toggle background color using right click in jQuery ? In this article, we will learn to toggle the background color using the right-click in jQuery. Approach 1: The approach is by using the contextmenu event. The contextmenu() method is used to bind the contextmenu event to the element being used. This can be used to perform the color toggling action o 4 min read How to set background color for an elements using jQuery ? In this article, we will set the background color for an element using jQuery. To add the background color, we use css() method. The css() method in JQuery is used to change style property of the selected element. The css() in JQuery can be used in different ways. The css() method can be used to che 1 min read Like