如何选择仅具有特定属性的元素？

Posted 2023-05-08

【中文标题】如何选择仅具有特定属性的元素？

【英文标题】：How can I select an element with specific attributes only?

【发布时间】：2019-09-29 15:02:54

【问题描述】：

我需要根据颜色选择将 src 粘贴到图像中。

这是我的标记：

<div data-img="[black-blue.png]" black blue></div>
<div data-img="[black.png]"  black></div>
<div data-img="[blue.png]"  blue></div>
<div data-img="[orange.png]"  orange></div>
<div data-img="[black-blue-orange.png]" black blue orange></div>
<div data-img="[blue-orange.png]" blue orange></div>
<div data-img="[blue-red-orange.png]" blue red orange></div>

我的脚本适用于元素属性：

var attributes = '';
for(var i = 0; i<activeColorsArray.length; i++ )
   attributes += '['+activeColorsArray[i]+']';

输出：[blue][black]，例如。它适用于黑色和蓝色项目，但它也可以捕捉黑色和蓝色和橙色元素。

[blue][black]:not([orange]) 不适合我，因为我有 8 种颜色...

只需要这样的选择器。

【参考方案1】：

一个想法是考虑元素具有的属性数量。如果您只想定位blue 和black，那么您只能定位具有3 个属性的元素（包括您的情况下的data-img）

activeColorsArray= ['blue','black'];

var attributes = '';
for(var i = 0; i<activeColorsArray.length; i++ )
   attributes += '['+activeColorsArray[i]+']';


var elements = document.querySelectorAll(attributes);
var items = Array.from(elements);

elements = items.filter((e) => 
 return e.attributes.length == 3;
)

for(var i=0;i<elements.length;i++) 
  elements[i].style.color="red";

<div data-img="[black-blue.png]" black blue>black blue</div>
<div data-img="[black.png]"  black>black</div>
<div data-img="[blue.png]"  blue>blue</div>
<div data-img="[orange.png]"  orange>orange</div>
<div data-img="[black-blue-orange.png]" black blue orange>black blue orange</div>
<div data-img="[blue-orange.png]" blue orange>blue orange</div>
<div data-img="[blue-red-orange.png]" blue red orange>blue red orange</div>

【参考方案2】：

如果那是您的确切标记，CSS 属性选择器将在没有任何 javascript 的情况下工作。此代码将仅匹配具有 data-img 属性且值恰好为 [black-blue.png] 的 div。由于您描述的确切原因，不建议尝试通过裸属性 (div[black][blue] ) 进行选择。

div[data-img="[black-blue.png]"] 
    color: red;

<div data-img="[black-blue.png]" black blue>black blue</div>
<div data-img="[black.png]"  black>black</div>
<div data-img="[blue.png]"  blue>blue</div>
<div data-img="[orange.png]"  orange>orange</div>
<div data-img="[black-blue-orange.png]" black blue orange>black blue orange</div>
<div data-img="[blue-orange.png]" blue orange>blue orange</div>
<div data-img="[blue-red-orange.png]" blue red orange>blue red orange</div>

https://jsfiddle.net/nk98tch1/

【讨论】：

非常感谢您的帮助。它对我不起作用。我不知道一开始会选择哪种颜色。我有 8 种颜色可供选择。