如何使用JavaScript设置backgroundImage为none，代码运行不生效求助

错误原因 #

• 缺失button元素：你提供的HTML代码中没有定义button标签，document.getElementsByTagName("button")[0]返回undefined，点击事件绑定直接失败
• JS语法不完整：两段示例代码都缺少事件监听函数的闭合符号})，语法错误会导致整段JS停止运行
• DOM加载顺序问题：如果JS代码放在DOM元素之前加载，执行时还未渲染出button和#home元素，获取元素的操作会失效
• 样式优先级冲突：如果你的CSS中#home的background-image属性加了!important标识，行内样式无法覆盖该规则，也会导致设置不生效

修复方案 #

首先在HTML中添加button元素，保证JS语法完整，将JS放在body末尾或者监听DOM加载完成后再执行，完整可运行代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>背景切换测试</title>
  <style>
    #home {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
      min-height: 100vh;
      align-items: center;
      background-image: url(https://via.placeholder.com/200.png);
      background-size: cover;
      background-position: center;
    }
  </style>
</head>
<body>
  <!-- 新增触发点击的按钮 -->
  <button>切换背景</button>
  <section class="home" id="home">
    <div class="content">
      <h3>Who I am?</h3>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
      <h2>My Education Process</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
      <a href="About.html" class="btn">Read More...</a> <br><br>
    </div>
  </section>

  <!-- JS放在body末尾，保证DOM已渲染完成 -->
  <script>
    var colorChanger = document.getElementsByTagName("button")[0];
    colorChanger.addEventListener("click", function() {
      document.body.style.backgroundColor = "#000";
      document.getElementById("home").style.backgroundImage = "none";
    }); // 补全之前缺失的闭合符号
  </script>
</body>
</html>

排查技巧 #

如果修改后仍然不生效，可按以下步骤排查：

1. 按F12打开浏览器控制台，查看是否有JS报错，若提示无法读取undefined的addEventListener属性，说明没有正确获取到button元素，检查按钮是否存在、JS加载位置是否正确
2. 在元素面板选中#home节点，查看样式面板中background-image属性是否被更高优先级的规则覆盖，若存在!important标识，要么移除!important，要么修改JS写法为document.getElementById("home").style.setProperty("background-image", "none", "important")

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