Use .css('backgroundColor') instead of .css('background'), if you just want the color, but not the other parts of the background:
$('.response-box').on('click', '.color-box ul li', function() {
console.log($(this).css('backgroundColor'));
});
.color-box ul li {
background-color: #ccc;
color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="response-box">
<div class="color-box">
<ul>
<li></li>
</ul>
</div>
</div>
I have LI where i have given a background-color: #ccc;, basically i want to get background color in variable, Now i’m getting this rgb(204, 204, 204) none repeat scroll 0% 0% / auto padding-box border-box format in variable but i want this rgb(204, 204, 204) format, what is wrong in this code?
What i tried:-
$('.response-box').on('click', '.color-box ul li', function() {
var colorBoxListBgColor = $(this).css('background');
console.log(colorBoxListBgColor);
});
.color-box ul li {
background-color: #ccc;
color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="response-box">
<div class="color-box">
<ul>
<li></li>
</ul>
</div>
</div>
Click on LI to check output in console.
Answer will be appreciated!
