我想通过 JS 更改具有相同颜色的文本，而无需使用任何类/id 等

Question

我的设计有很多具有相同颜色的文本。我想更改它们的颜色取决于单击按钮或 php 变量。文本没有 ID，我也找不到它们的类，因为许多不同的类使用相同的颜色。

所以，最短的方法是改变具有相同颜色的东西来解决我的问题。

我怎样才能通过JS做到这一点？

我想通过单击访问者的按钮来更改颜色，也可以通过管理面板的 php 变量来更改颜色。

Answer 1

首先，您需要决定真正需要更改哪些元素。您的颜色更改规则是否适用于所有元素？- 只是段落、标签或div？

做出决定后，您可以尝试这样的事情。我假设您正在尝试对页面上的所有元素进行颜色更改。

document.querySelectorAll('*').forEach(function(node) {
if (node.style.color === 'red')
node.style.color = 'blue';
});

querySelectorAll返回与作为第一个参数传递的 CSS 选择器匹配的所有元素。您可以使用通配符*让它返回屏幕上的每个元素。

但是，如果您可以缩小规则范围并希望它仅应用于<label>和<p>元素，则可以简单地使用它，如下所示

document.querySelectorAll('label, p').forEach(function(node) {
if (node.style.color === 'red')
node.style.color = 'blue';
});

Answer 2

您可以使用所有选择器*搜索页面上的所有元素，然后编写一个条件来检查 style.color 是否等于目标...

let everything = document.querySelectorAll('*');
let button = document.getElementById('button');
button.addEventListener('click', function() {
everything.forEach(function(value, index) {
if(value.style.color === 'red') {
console.log(value.textContent)
}
})
})

<div style="color:red;">Lorem</div>
<p style="color:green;">ipsum</p>
<h1 style="color:blue;">Some Header</h1>
<p>dummy text</p>
<button id="button">Click Me</button>