选择具有特定背景颜色的元素

Posted 2023-03-05

【中文标题】选择具有特定背景颜色的元素

【英文标题】：Selecting elements with a certain background color

【发布时间】：2010-09-21 21:13:38

【问题描述】：

我想在 div 中选择一堆 spans，其 CSS 包含特定的背景颜色。我如何做到这一点？

【参考方案1】：

如果我正确理解了这个问题，选择器[attribute=value] 将不起作用，因为<span> 不包含属性“背景颜色”。您可以快速对其进行测试以确认它不会匹配任何内容：

$('#someDiv span[background-color]').size(); // returns 0

给定：

.one, .two 
  background-color: black;


.three 
  background-color: red;

这是一个可以工作的sn-p：

$('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>

【讨论】：

如何为元素 ID 做同样的事情？如果您在同一页面上有 5 个相同的 ID，您将如何匹配它们、分配背景，然后找到其他匹配的 ID 会做同样的事情？

@Tom 这有点棘手，因为你不应该有 5 个 ID。一个 id 在该页面上应该是唯一的，并且拥有多个 ID 将无法与 javascript 一起使用（我相信它只会抓取它找到的第一个）。你能把它们转换成类吗？

它对我有用。有微小的变化。我检查时的颜色代码以 RGB 显示，但是当代码运行时，#XXXXXX 有效。$(document).ready( function () /*run script after DOM is ready */ $('#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

【参考方案2】：

Javascript 方法

获取所有跨度 将跨度节点列表转换为数组 过滤器跨越数组 更改匹配 span 元素的背景颜色

// 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>

【参考方案3】：

使用属性选择器 [attribute=value] 查找某个属性值。

#id_of_the_div span[background-color=rgb(255,255,255)]

【讨论】：

这不起作用，因为 background-color 是 css 属性而不是 html 属性