JavaScripts 常见误区
对 style 对象的使用存在误解
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="./images/1.webp" alt=""><script>//获取图片元素const img=document.querySelector('img')//修改图片对象的属性 对象.属性=值 img.title='若水艺术照'img.style.src='./images/3.webp'</script>
</body>
</html>问题原因
-
style对象的作用
style对象用于设置内联 CSS 样式（即元素的style属性），例如修改颜色、大小、位置等视觉样式。但它不直接控制 HTML 属性。 -
src是 HTML 属性，不是 CSS 样式
图片的src属性（用于指定图片路径）是标准的 HTML 属性，应该直接通过 DOM 对象修改，而不是通过style对象。例如：img.src = './images/3.webp'; // 正确方式：直接修改 src 属性 -
错误的
style.src解析
当你写img.style.src = './images/3.webp'时，浏览器会尝试将其解释为 CSS 样式属性src，但 CSS 中并没有src这个属性名，因此这个赋值会被忽略，不会产生任何效果。
正确写法
要修改图片的路径，应该直接操作 src 属性：
const img = document.querySelector('img');
img.src = './images/3.webp'; // 直接修改 src 属性
img.title = '若水艺术照'; // title 是 HTML 属性，这样修改是正确的