JS如何定位.switch-field input:checked修改CSS属性

你写的代码不生效是三个错误导致的：

• API用错：getElementsByClassName() 只能匹配元素类名，不支持带伪类、层级关系的复杂选择器，传入switch-field input:checked根本匹配不到任何元素。
• 目标元素找错：你写的CSS规则作用对象是选中状态input后面紧邻的<label>元素，不是<input>本身——原生表单input元素默认不会响应你写的背景色、文字颜色这类样式，开关的视觉效果都是加在关联label上的。
• 语法错误：给style属性赋值颜色时，十六进制色值是字符串类型，必须用引号包裹，直接写裸色值会触发JS语法错误。

用支持完整CSS选择器语法的querySelector/querySelectorAll来定位元素，根据你的场景选对应写法即可：

单次静态修改 #

如果只需要在某个固定时机（比如页面加载完成、点击某个按钮时）修改当前选中项的样式，直接写：

// 直接复用你CSS里写好的选择器定位目标label
const activeLabel = document.querySelector('.switch-field input:checked + label');
// 加判断避免当前没有选中项时脚本报错
if (activeLabel) {
  activeLabel.style.backgroundColor = '#4400ff';
}

动态切换适配 #

如果你的开关组支持点击切换选项，只改一次会出现切换后样式失效的问题，需要加change事件监听做联动：

// 监听开关组内所有input的状态变化
document.querySelectorAll('.switch-field input').forEach(input => {
  input.addEventListener('change', () => {
    // 先清空所有label的行内样式，回退到CSS默认样式
    document.querySelectorAll('.switch-field label').forEach(label => {
      label.style.backgroundColor = '';
    });
    // 给当前选中项对应的label设置目标背景色
    if (input.checked) {
      input.nextElementSibling.style.backgroundColor = '#4400ff';
    }
  })
})

全局样式覆盖（最省事） #

如果不需要动态逻辑，只是想全局替换这个选中态的背景色，直接动态注入一条CSS规则就行，不用绑定任何事件，切换选项时自动生效：

const customStyle = document.createElement('style');
customStyle.textContent = `.switch-field input:checked + label { background-color: #4400ff; }`;
document.head.appendChild(customStyle);

内容的提问来源于stack exchange，提问作者Julian ._.