如何使用JavaScript及jQuery从数组取值更新div的background背景属性

现有代码问题 #

• HTML语法错误：每个img标签后冗余了</div>闭合标签，导致DOM结构解析异常，.mypics元素的位置不符合预期
• 执行时机缺失：脚本如果在DOM未渲染完成时运行，getElementsByClassName会返回空集合，读取src属性时会抛出异常

修复后代码 #

HTML代码 #

<div id="images">
  <img class="mypics" src="kitty.png" style="display:none">
  <img class="mypics" src="doggy.png" style="display:none">
  <img class="mypics" src="mouse.png" style="display:none">
</div>

JavaScript/jQuery代码 #

// 等待DOM完全加载后再执行逻辑
$(document).ready(function() {
  // 兼容写法：先判断图片集合是否有值，避免空值报错
  const picArray = document.getElementsByClassName("mypics");
  if (picArray.length > 0) {
    $('#images').css('background-image', `url("${picArray[0].src}")`);
  }
  
  // 也可以使用纯jQuery写法更简洁
  // const firstPicSrc = $('.mypics').eq(0).attr('src');
  // $('#images').css('background-image', `url("${firstPicSrc}")`);
})

补充说明 #

• 如果需要背景图适配div尺寸，可以给#images加额外CSS：#images { background-size: cover; background-position: center; background-repeat: no-repeat; }
• 需确保kitty.png等图片资源的路径和当前页面路径匹配，避免出现404加载失败问题

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