Выбор элементов с определенным цветом фона
Я хочу выбрать группу span в div, CSS которой содержит определенный цвет фона. Как мне этого добиться?
Ответы 3
Используйте селектор атрибутов [attribute = value], чтобы найти определенное значение атрибута.
#id_of_the_div span[background-color=rgb(255,255,255)]
Если я правильно понял вопрос, селектор [attribute=value]не будет работать, потому что <span> не содержит атрибута «background-color». вы можете быстро проверить это, чтобы убедиться, что ничего не подходит:
$('#someDiv span[background-color]').size(); // returns 0
дано:
.one, .two {
background-color: black;
}
.three {
background-color: red;
}
вот фрагмент, который будет работать:
$('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>Как бы вы сделали то же самое для идентификатора элемента? И если у вас есть 5 одинаковых идентификаторов на одной странице, как бы вы сопоставили их, назначили фон, а затем нашли бы другие совпадающие идентификаторы, которые будут делать то же самое?
@Tom Это довольно сложно, потому что у вас не должно быть 5 идентификаторов. Идентификатор должен быть уникальным на этой странице, и наличие более одного не будет работать с javascript (я считаю, что он просто захватывает первый найденный). Можете ли вы преобразовать их в классы?
У меня это сработало. с небольшими изменениями. Цветовые коды, когда я проверяю, отображаются в RGB, но когда код запускается, работает #XXXXXX. $ (Document) .ready (function () / * запускать скрипт после того, как DOM будет готов * / {$ ('# MyId tr'). each (function () {var yellowmatch = '#ffffcc'; var redmatch = '# ffd7d7'; var greenmatch = '# e1ffe1'; if ($ (this) .css ('background-color') == redmatch) { } if ($ (this) .css ('background-color') == yellowmatch) {} if ($ (this) .css ('background-color') == greenmatch) {}});}); < / скрипт>
@owen хорошее решение! css('background-color'); также может возвращать rgba ... var match = 'rgba(0, 0, 0, 0.5)'; //black with 50% alpha
Подход Javascript
- Получить все пролеты
- Преобразование списка узлов в массив
- Массив интервалов фильтра
- Изменить цвет фона согласованных элементов диапазона
// 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>
это не сработает, потому что background-color является свойством css, а не свойством html