用js设置radio的backgroundColor样式，为什么没有变化？

设置radio的样式也可以通过JavaScript来实现，但是需要注意一些细节。由于radio的样式属性是比较特殊的，需要使用伪元素来设置，所以我们需要在JavaScript中通过创建伪元素来设置radio的样式属性。以下是一个设置radio样式的JavaScript示例代码：

// 获取所有的radio元素
const radios = document.querySelectorAll('input[type="radio"]');

// 遍历所有的radio元素
radios.forEach((radio) => {
  // 创建伪元素
  const label = document.createElement('label');
  const span = document.createElement('span');
  label.classList.add('radio-label');
  span.classList.add('radio-btn');
  label.appendChild(span);
  radio.parentNode.insertBefore(label, radio.nextSibling);

  // 监听radio的点击事件
  radio.addEventListener('click', () => {
    // 获取所有的radio元素
    const radios = document.querySelectorAll('input[type="radio"]');

    // 遍历所有的radio元素
    radios.forEach((radio) => {
      // 判断是否被选中
      if (radio.checked) {
        // 设置背景色
        radio.nextSibling.querySelector('.radio-btn').style.backgroundColor = '#f00';
      } else {
        // 清除背景色
        radio.nextSibling.querySelector('.radio-btn').style.backgroundColor = '#fff';
      }
    });
  });
});

这段代码会为所有的radio元素创建伪元素，并监听它们的点击事件。当radio被选中时，会将对应的伪元素的背景色设置为红色；当radio未被选中时，会将背景色设置为白色。注意，在JavaScript中设置radio样式时，需要使用伪元素的背景色来实现，而不是直接设置radio元素的背景色。