如何使用JAVASCRIPT操作DOM通过单选按钮修改div的background-size属性

问题根因 #

你的代码存在几个核心问题导致cover不生效：

• 三个样式赋值是顺序执行的，后面的赋值会直接覆盖前面的结果：选中cover时，第一行虽然给webkitBackgroundSize设了cover，但执行到auto判断行时，三元运算符两个分支都是auto，会把backgroundSize强制设为auto；执行到contain判断行时，因为contain未选中，又会把backgroundSize设为none，直接冲掉了cover的设置
• 不需要单独使用webkitBackgroundSize前缀，所有现代浏览器都支持标准的backgroundSize属性
• HTML中label的for属性值和对应input的id大小写不匹配，点击label无法选中对应单选框

优化实现方案 #

修复后的HTML（修正label匹配问题） #

<div class="radiobtn">
  <input type="radio" id="bgCOVER" name="radiobtnnm" value="cover" onclick="backgroundfunc()">
  <label for="bgCOVER">Background Cover</label> 

  <input type="radio" id="bgAUTO" name="radiobtnnm" value="auto" onclick="backgroundfunc()" checked>
  <label for="bgAUTO">Background Auto</label> 

  <input type="radio" id="bgCONTAIN" name="radiobtnnm" value="contain" onclick="backgroundfunc()">
  <label for="bgCONTAIN">Background Contain</label> 
</div>

方案1：极简修复JS逻辑 #

不需要逐个判断单选框选中状态，直接取选中项的值赋值即可，代码量减少80%：

function backgroundfunc() {
  // 直接获取选中的单选按钮值
  const selectedSize = document.querySelector('input[name="radiobtnnm"]:checked').value;
  // 一次赋值完成样式修改
  document.getElementById("outputjs").style.backgroundSize = selectedSize;
}

方案2：可扩展的事件委托写法（推荐后续项目使用） #

可以删掉HTML中所有单选按钮的onclick属性，用JS统一绑定事件，后续新增选项不需要改动JS逻辑：

document.addEventListener('DOMContentLoaded', function() {
  // 给所有同组单选按钮绑定change事件
  document.querySelectorAll('input[name="radiobtnnm"]').forEach(radio => {
    radio.addEventListener('change', function() {
      document.getElementById("outputjs").style.backgroundSize = this.value;
    })
  })
})

补充说明：如果需要兼容非常老旧的webkit内核浏览器，可以在赋值标准backgroundSize之后，额外加一行document.getElementById("outputjs").style.webkitBackgroundSize = selectedSize即可，不会和标准属性冲突。

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