如何通过JavaScript以属性选择器修改元素样式？

你的问题出在错误使用了getElementsByClassName方法——这个方法只能接收纯类名字符串，不能传入完整的CSS选择器（比如带属性选择器的组合字符串），而且它返回的是元素集合，不能直接给集合设置style属性。

下面是几种正确的实现方式：

方式1：使用querySelector（匹配第一个符合条件的元素） #

这是最直接的方式，和你写的CSS选择器语法完全一致：

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

方式2：使用querySelectorAll（匹配所有符合条件的元素） #

如果页面中有多个符合条件的元素，需要遍历集合逐个设置样式：

const targetElements = document.querySelectorAll('.radio-wrapper[data-option-method="Option-A"]');
targetElements.forEach(element => {
  element.style.display = "none";
});

方式3：如果一定要用getElementsByClassName #

先获取所有radio-wrapper类的元素，再筛选出带有指定data-option-method属性的元素：

const wrapperElements = document.getElementsByClassName('radio-wrapper');
for (const element of wrapperElements) {
  if (element.dataset.optionMethod === 'Option-A') {
    element.style.display = 'none';
  }
}

为什么原代码失效？ #

你写的document.getElementsByClassName(".radio-wrapper[data-option-method=\"Option-A\"]")会把整个字符串当成类名去查找，而页面中不存在类名为.radio-wrapper[data-option-method="Option-A"]的元素，所以返回空集合，自然无法设置样式。

内容的提问来源于stack exchange，提问作者overtree3721