使用 JavaScript 定位/样式化元素的属性答案

【问题标题】：Target/style an element’s attributes with JavaScript使用 JavaScript 定位/样式化元素的属性
【发布时间】：2022-07-25 20:26:07
【问题描述】：

我正在尝试使用 JavaScript 更改下面 div 元素的样式，但使用它的属性作为选择器而不是类：

<div class="radio-wrapper" data-option-method="Option-A">

例如，我可以使用以下 CSS 来达到预期的效果：

.radio-wrapper[data-option-method="Option-A"] { display: none; }

但是当我在 JS 中尝试同样的方法时，我没有任何运气：

document.getElementsByClassName(".radio-wrapper[data-option-method="Option-A"]").style.display = "none";

我确信这是一个相当简单的问题，但我正在努力研究一个明确的答案，非常感谢任何建议！

【问题讨论】：

使用单引号document.getElementsByClassName(".radio-wrapper[data-option-method='Option-A']").style.display = "none";

【解决方案1】：

问题在于这不是类名。（[data-option-method="Option-A"] 是一个属性）试试看：

document.querySelector('.radio-wrapper[data-option-method="Option-A"]')

如果要选择多个，请使用 querySelectorAll 但请记住返回数组。

还要注意字符串中的 `、" 和 '，要么用 " 转义它们，要么像我一样将它们组合起来。

【讨论】：

【解决方案2】：

首先，您有一个明显的语法错误。您的浏览器控制台无疑会向您指出这一点。始终检查控制台是否有错误。

由于您的字符串包含双引号，因此对字符串本身使用单引号：

'.radio-wrapper[data-option-method="Option-A"]'

除此之外，document.getElementsByClassName 是在这里使用的错误函数。您拥有的不是类名，而是更复杂的选择器。 document.querySelector 可以根据它找到元素：

document.querySelector('.radio-wrapper[data-option-method="Option-A"]').style.display = "none";

或者，如果有多个匹配元素并且您想定位所有这些元素，请使用 querySelectorAll 并遍历结果：

let elements = document.querySelectorAll('.radio-wrapper[data-option-method="Option-A"]');
for (let el of elements) {
  el.style.display = "none";
}

【讨论】：