使用setAttribute切换图片时出现“无法读取null属性”错误求助

核心问题分析 #

报错setAttribute cannot read properties of null的本质是：你要操作的mainBanner元素为null——也就是代码执行时，页面上还没加载出id="banner"的元素，或者API使用方式有误。结合你的代码，具体问题有这几个：

1. 脚本引入顺序与DOM加载时机错配 #

你把script.js放在jQuery之前引入，而且script.js里的原生JS代码是直接执行的，没有等待DOM加载完成。这时候浏览器还没解析到<img id="banner">，document.getElementById("banner")自然返回null，调用setAttribute就会报错。

2. jQuery对象与原生DOM API混用 #

第一个代码片段里，用$("#banner")得到的是jQuery包装对象，不是原生DOM元素，不能直接调用原生的setAttribute方法，这也是潜在错误点。

3. getDay()返回值与字典键不匹配 #

new Date().getDay()返回的是0（周日）到6（周六），但你的flagDictionary键是1-6，周日时会找不到对应图片路径，导致加载失败。

4. 变量未声明导致全局污染 #

flagDictionary、day、mainBanner都没加let/const声明，会自动变成全局变量，容易和其他代码产生冲突。

修复后的代码方案 #

方案一：原生JS实现（无需jQuery） #

把脚本放在</body>标签前，确保DOM加载完成后再执行代码：

<!-- HTML部分 -->
<img src="assets/wcuFOD.png" class="banner" id="banner">

<!-- 脚本放在body末尾 -->
<script>
const flagDictionary = {
  0: "assets/周日默认图.png", // 补充周日的图片，或者根据需求调整键对应关系
  1: "assets/WCUFOD.png",
  2: "assets/lesbians.svg",
  3: "assets/Gay.svg",
  4: "assets/bisexual.png",
  5: "assets/intersex.jpg",
  6: "assets/asexual.png",
};

// 等待DOM完全加载后执行
document.addEventListener('DOMContentLoaded', function() {
  const time = new Date();
  const day = time.getDay();
  const mainBanner = document.getElementById("banner");
  
  // 先检查元素和路径是否存在，避免报错
  if (mainBanner && flagDictionary[day]) {
    mainBanner.setAttribute("src", flagDictionary[day]);
  }
});
</script>

方案二：jQuery实现 #

先引入jQuery，再执行相关代码，并且正确使用jQuery的API：

<!-- 先引入jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 再写业务脚本 -->
<script>
$(function() { // 此函数会自动等待DOM加载完成
  const flagDictionary = {
    0: "assets/周日默认图.png",
    1: "assets/WCUFOD.png",
    2: "assets/lesbians.svg",
    3: "assets/upennLogo.png",
    4: "assets/bisexual.png",
    5: "assets/intersex.jpg",
    6: "assets/asexual.png",
  };
  
  const time = new Date();
  const day = time.getDay();
  const mainBanner = $("#banner");
  
  if (flagDictionary[day]) {
    mainBanner.attr("src", flagDictionary[day]); // 使用jQuery的attr方法设置属性
  }
});
</script>

<!-- HTML部分 -->
<img src="assets/wcuFOD.png" class="banner" id="banner">

关键注意点 #

• 脚本要么放在DOM元素之后，要么通过DOMContentLoaded（原生）、$(function())（jQuery）等待DOM加载完成再执行元素操作。
• jQuery对象和原生DOM元素的API不能混用，jQuery对象要用.attr()这类方法，原生元素用setAttribute。
• 必须覆盖getDay()的所有返回值（0-6），避免出现找不到图片路径的情况。

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