JavaScript无法修改HTML图片元素属性的原因及解决方法

核心问题 #

你当前的JavaScript代码错误选中了id="bildeGalleri"的div元素，而非其中的目标img元素，这直接导致了所有异常：

• 打印src返回undefined：div元素本身不存在src属性
• 打印innerHTML正常显示：div的innerHTML确实包含内部img的代码内容
• setAttribute无效果：你是给div元素设置属性，自然不会影响到内部的img

修复步骤 #

调整选择器，精准选中div内的img元素即可：

• 如果div内只有一个img，使用复合选择器直接定位：

  const targetImg = document.querySelector('#bildeGalleri img');
  

• 如果div内有多个img，可通过索引指定目标（比如第一个），或给目标img单独添加id/class：

  // 选中div内的第二个img（索引从0开始）
  const targetImg = document.querySelectorAll('#bildeGalleri img')[1];
  
  // 或者给目标img加id后直接选中
  const targetImg = document.getElementById('specific-img-id');
  

修正后示例代码 #

// 正确选中目标img
const targetImg = document.querySelector('#bildeGalleri img');

// 现在可正常访问和修改属性
console.log(targetImg.src); // 输出当前图片的src地址
targetImg.setAttribute('src', 'your-new-image.jpg'); // 成功替换图片

内容的提问来源于stack exchange，提问作者Daniel G.