Is it possible to select elements based on the value of a CSS property. For example:
CSS rules:
div.blockWithBorder { border: 1px solid red; }
HTML markup:
<div id="A" class="blockWithRedBorder">...</div>
<div id="B" style="border: 5px dashed red">...</div>
<div id="C" style="border: 2px solid #FF0000">...</div>
I want to find all div elements with a red border. A, B and C match this query.
You could do this, but it would mean getting the computed style value for each element you were querying against which could be a very expensive operation.
Here's an example:
var a = [].slice.call(document.querySelectorAll("a"));
var redLinks = a.filter(function(i){
window.getComputedStyle(i);
var color = i.style.borderColor.toLowerCase();
return (color === 'red' || color === '#f00' || color === '#ff0000') ? i : false;
});
CSS selector which solves his problem, not any other methods (such as using jQuery, ...), if you say it's possible, you should post some CSS code, added with the note about the poor performance.
You can filter set of elements:
var $divsBorderRed = $('div').filter(function(){
return ~this.style.borderColor.indexOf("red") || ~this.style.borderColor.indexOf("rgb(255, 0, 0)") || ~this.style.borderColor.indexOf("#FF0000")
});
EDIT: or like this:
var $divsBorderRed = $('div.blockWithRedBorder, div[style*="#FF000"], div[style*="red"]');
As you can see, that's not great in all cases...
$(this).css("border-color")?Firstly, you SHOULD NOT have to code for this. A class like "blockWithRedBorder" or some selector should be present. Saying that incase you are looking for a quick fix below is something that should help you....
You could iterate through all the divs and read the border css property like this : jsfiddle
$("div").each(function(i, item){
var selector = '#' + item.id;
var yourValue = $(selector).css("border");
// you can perform your 'red' color check here
// make sure to match it with 'rgb(255, 0, 0)' and with color 'red'.
});
$(item) will be more efficient than $('#'+item.id)