问使用JavaScript实现元素属性的目标/样式
EN

Stack Overflow用户

提问于 2022-07-25 12:21:02

回答 2查看 33关注 0票数 -1

我试图使用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";

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

回答已采纳

发布于 2022-07-25 12:26:07

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

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

'.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";
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73109141

复制

相似问题

问使用JavaScript实现元素属性的目标/样式EN