如何根据“颜色”属性获取具有“document.querySelector”的特定元素？答案

【问题标题】：How can i get specific element with 'document.querySelector' according to 'color' property?如何根据“颜色”属性获取具有“document.querySelector”的特定元素？
【发布时间】：2020-11-09 04:15:02
【问题描述】：

我想获得带有红色属性的“p”元素。为此，我编写了下面的代码，但结果为空。我做错了什么？

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./test.css">
    <script src="./test.js" defer></script>
    <title>test</title>
</head>
<body>
    <p id="p1">red</p>
    <p id="p2">green</p>
    <p id="p3">blue</p>
</body>
</html>

test.js

test.js

"use strict"

let element = document.querySelector("p[color='red']");
console.log(element); // logs null

test.css

#p1 {
  color: red;
}

#p2 {
  color: green;
}

#p3 {
  color: blue;
}

【问题讨论】：

请转到关于堆栈溢出的另一个问题。 stackoverflow.com/questions/38306873/…

标签： javascript

【解决方案1】：

您正在尝试选择一个元素，而不是基于它的 HTML 属性，而是基于应用于它的 CSS 规则。这不能用普通的querySelector 来完成。

对于一般情况，遍历所有可能匹配的元素并在每个元素上调用 getComputedStyle 以找到匹配的元素：

const p = [...document.querySelectorAll('p')]
  .find(p => window.getComputedStyle(p).color === 'rgb(255, 0, 0)');
console.log(p);

#p1 {
  color: red;
}

#p2 {
  color: green;
}

#p3 {
  color: blue;
}

<p id="p1">red</p>
<p id="p2">green</p>
<p id="p3">blue</p>

请注意，对于颜色，您需要使用rgb 语法。

【讨论】：