使用 setAttribute 修改图片 src 属性时报错的解决方案-html教程-PHP中文网

使用 setAttribute 修改图片 src 属性时报错的解决方案

花韻仙語

发布： 2025-10-09 15:01:01

原创

784人浏览过

使用 setattribute 修改图片 src 属性时报错的解决方案

正如摘要所述，本文旨在解决在使用 JavaScript 修改 HTML 图片元素的 src 属性时遇到的 "setAttribute cannot read properties of null" 错误。该错误通常发生在尝试在 DOM 加载完成之前访问和操作 DOM 元素时。以下将详细介绍问题的原因以及如何通过代码调整来解决此问题。

问题分析

"setAttribute cannot read properties of null" 错误表明，在尝试调用 setAttribute 方法时，目标元素（在本例中是 id 为 "banner" 的 <img> 元素）为 null。这通常意味着 JavaScript 代码在 HTML 元素被完全加载之前就执行了，导致 document.getElementById("banner") 或 $("#banner") 无法找到该元素，从而返回 null。

解决方案

为了确保在 DOM 完全加载后再执行 JavaScript 代码，可以使用以下两种方法：

1. 使用 jQuery 的 $(function() { ... });

jQuery 提供了一个便捷的方法来确保代码在 DOM 加载完成后执行。将代码包裹在 $(function() { ... }); 中即可：

$(function() {
  flagDictionary = {
    1 : "assets/WCUFOD.png",
    2 : "assets/lesbians.svg",
    3 : "assets/Gay.svg",
    4 : "assets/bisexual.png",
    5 : "assets/intersex.jpg",
    6 : "assets/asexual.png",
  }

  const time = new Date();
  const day = time.getDay()

  let mainBanner = document.getElementById("banner");
  mainBanner.setAttribute("src", flagDictionary[1]);
});

登录后复制

2. 使用原生 JavaScript 的 DOMContentLoaded 事件

原生 JavaScript 提供了 DOMContentLoaded 事件，可以在 DOM 加载完成后触发。可以使用以下代码来实现相同的功能：

图改改

在线修改图片文字

455

查看详情

document.addEventListener('DOMContentLoaded', function() {
  flagDictionary = {
    1 : "assets/WCUFOD.png",
    2 : "assets/lesbians.svg",
    3 : "assets/Gay.svg",
    4 : "assets/bisexual.png",
    5 : "assets/intersex.jpg",
    6 : "assets/asexual.png",
  }

  const time = new Date();
  const day = time.getDay()

  let mainBanner = document.getElementById("banner");
  mainBanner.setAttribute("src", flagDictionary[1]);
});

登录后复制

3. 调整 script 标签的位置

将 <script> 标签放在 </body> 标签之前，也能确保在 HTML 元素加载完成后再执行 JavaScript 代码。

<body>
  <img src="assets/wcuFOD.png" class="banner" id="banner"></img>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="script.js"></script>
</body>

登录后复制

4. 使用 jQuery 的 attr() 方法 (推荐)

如果已经引入了 jQuery，推荐使用 jQuery 的 attr() 方法来设置属性，它更简洁方便，并且能避免一些潜在的问题。

$(function() {
  flagDictionary = {
    1 : "assets/WCUFOD.png",
    2 : "assets/lesbians.svg",
    3 : "assets/Gay.svg",
    4 : "assets/bisexual.png",
    5 : "assets/intersex.jpg",
    6 : "assets/asexual.png",
  }

  const time = new Date();
  const day = time.getDay()

  $("#banner").attr("src", flagDictionary[1]);
});

登录后复制

注意事项

脚本加载顺序： 确保 jQuery 库在 script.js 之前加载，因为 script.js 中使用了 jQuery 的相关功能。
调试技巧： 使用浏览器的开发者工具（通常按 F12 键打开）可以帮助你调试 JavaScript 代码。通过 console.log() 语句可以输出变量的值，以便检查代码的执行情况。
错误处理： 在实际开发中，建议添加错误处理机制，例如使用 try...catch 语句来捕获可能发生的异常，并进行相应的处理。

总结

当使用 JavaScript 操作 DOM 元素时，必须确保在 DOM 完全加载后再执行相关代码。本文介绍了使用 jQuery 的 $(function() { ... });、原生 JavaScript 的 DOMContentLoaded 事件以及调整 <script> 标签位置等方法来解决 "setAttribute cannot read properties of null" 错误。同时推荐使用jQuery的attr()方法来设置属性，代码更简洁方便。选择适合自己项目的方法，并结合调试技巧和错误处理机制，可以有效地避免此类问题的发生。

以上就是使用 setAttribute 修改图片 src 属性时报错的解决方案的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

修复JavaScript简易计算器中的常见运算符逻辑错误网页加载动画的实现与控制：从CSS设计到JavaScript隐藏的完整指南 JavaScript中移除动态内容中的undefined值给HTML标题首字母添加样式：JavaScript实现方案解决JavaScript图片查看器循环显示首张图片异常问题