Selecting elements with a certain background color
if i understand the question correctly, the selector [attribute=value] will not work because <span> does not contain an attribute "background-color". you can test that out quickly to confirm it won't match anything:
$('#someDiv span[background-color]').size(); // returns 0
given:
.one, .two {
background-color: black;
}
.three {
background-color: red;
}
here's a snippet that will work:
$('div#someDiv span').filter(function() {
var match = 'rgb(0, 0, 0)'; // match background-color: black
/*
true = keep this element in our wrapped set
false = remove this element from our wrapped set
*/
return ( $(this).css('background-color') == match );
}).css('background-color', 'green'); // change background color of all black spans.one, .two {
background-color: black;
}
.three {
background-color: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div id="someDiv">
<span class="one">test one</span>
<span class="two">test two</span>
<span class="three">test three</span>
</div>Javascript Approach
- Get all spans
- Convert spans nodelist to array
- Filter spans array
- Change the background color of matched span elements
// Get all spans
let spans = document.querySelectorAll('div#someDiv span');
// Convert spans nodeslist to array
spans = Array.from( spans );
// Filter spans array
// Get CSS properties object of selected element - [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle)
let arr = spans.filter( span => String( document.defaultView.getComputedStyle( span, null ).backgroundColor ) == 'rgb(0, 0, 0)' );
// Change background color of matched span elements
arr.forEach( span => {
span.style.backgroundColor = 'green';
});.one, .two {
background-color: black;
}
.three {
background-color: red;
}<div id="someDiv">
<span class="one">test one</span>
<span class="two">test two</span>
<span class="three">test three</span>
</div>