Селектор на основе свойства css

Question

Можно ли выбрать элементы на основе значения свойства CSS. Например: правила

CSS:

div.blockWithBorder { border: 1px solid red; } 

HTML разметка:

<div id="A" class="blockWithRedBorder">...</div> 
<div id="B" style="border: 5px dashed red">...</div> 
<div id="C" style="border: 2px solid #FF0000">...</div> 

Я хочу, чтобы найти все div элементов с красной каймой. A, B и C соответствуют этому запросу.

Answer 1

Вы могли бы это сделать, но это означало бы получение вычисленного значения стиля для каждого элемента, на который вы запрашивали, что может быть очень дорогостоящей операцией.

Вот пример:

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; 
}); 

Answer 2

Вы можете фильтровать набор элементов:

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: или как это:

var $divsBorderRed = $('div.blockWithRedBorder, div[style*="#FF000"], div[style*="red"]'); 

Как вы можете видеть, что это не очень хорошо во всех случаях ...

Answer 3

Во-первых, вы НЕ ДОЛЖНЫ должны кодовое для этого. Должен присутствовать класс типа «blockWithRedBorder» или какой-либо селектор. Сказать, что упаковывают вы ищете быстро исправить ниже то, что должно помочь вам ....

Вы можете перебирать все divs и прочитать свойство границы CSS так: 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'. 
});