How do I return the css property of a clicked div class with jquery?

Question

I'm trying to make a color switcher where the color of a div changes based on which circle of color you clicked. I have 9 divs with class "color-circle" of various colors, how do I make it so that when the div is clicked it would return that specific "background" value?

I tried using "this" but its not working, is there a way to do this without having to write a click function for every div?

Thanks

 $(".color-circle").click(function(){ $("#color-cont").css("background-color", $(this).css("background")); }) 

 #colorPicker { width: 100%; height: 50px; margin-top: 10px; border: 1px solid #ccc; border-radius: 3px; display: inline-flex; justify-content: center; } .color-circle { border: 1px solid #ccc; border-radius: 50%; width: 40px; height: 40px; margin: auto; } .color-circle:nth-of-type(1) { background: #DDC79B; } .color-circle:nth-of-type(2) { background: #C7DD9B; } .color-circle:nth-of-type(3) { background: #9BDD9B; } .color-circle:nth-of-type(4) { background: #9BDDC7; } .color-circle:nth-of-type(5) { background: #9BC7DD; } .color-circle:nth-of-type(6) { background: #9B9BDD; } .color-circle:nth-of-type(7) { background: #C79BDD; } .color-circle:nth-of-type(8) { background: #DD9BC7; } .color-circle:nth-of-type(9) { background: #DD9B9B; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div id="color-cont"> <h3>Choose the theme color for your profile</h3> <div id="colorPicker"> <div class="color-circle"></div> <div class="color-circle"></div> <div class="color-circle"></div> <div class="color-circle"></div> <div class="color-circle"></div> <div class="color-circle"></div> <div class="color-circle"></div> <div class="color-circle"></div> <div class="color-circle"></div> </div> </div> 

Answer 1

Try this:

$(".color-circle").click(function(){
   var background= $(this).css("background-color");
$("#colorPicker").css("background-color",background);                  
   })

First of all, you should get the background-color of the clicked .color-circle : var background= $(this).css("background-color");

Then you affect this color to the #colorPicker div:

$("#colorPicker").css("background-color",background);     

Demo:

 $(".color-circle").click(function(){ var background= $(this).css("background-color"); $("#colorPicker").css("background-color",background); }) 

 #colorPicker { width: 100%; height: 50px; margin-top: 10px; border: 1px solid #ccc; border-radius: 3px; display: inline-flex; justify-content: center; } .color-circle { border: 1px solid #ccc; border-radius: 50%; width: 40px; height: 40px; margin: auto; } .color-circle:nth-of-type(1) { background: #DDC79B; } .color-circle:nth-of-type(2) { background: #C7DD9B; } .color-circle:nth-of-type(3) { background: #9BDD9B; } .color-circle:nth-of-type(4) { background: #9BDDC7; } .color-circle:nth-of-type(5) { background: #9BC7DD; } .color-circle:nth-of-type(6) { background: #9B9BDD; } .color-circle:nth-of-type(7) { background: #C79BDD; } .color-circle:nth-of-type(8) { background: #DD9BC7; } .color-circle:nth-of-type(9) { background: #DD9B9B; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div id="color-cont"> <h3>Choose the theme color for your profile</h3> <div id="colorPicker"> <div class="color-circle"></div> <div class="color-circle"></div> <div class="color-circle"></div> <div class="color-circle"></div> <div class="color-circle"></div> <div class="color-circle"></div> <div class="color-circle"></div> <div class="color-circle"></div> <div class="color-circle"></div> </div> </div>