JavaScript实现鼠标悬停放大牙买加国旗图片代码不生效求助

问题原因 #

你的代码失效主要是两个语法错误导致的：

• JavaScript属性赋值语法错误：不能在一行内连续给同一个DOM元素的多个属性直接连写赋值，原有写法document.getElementById("jamaica").src="jamaica.gif" height="400" width="500"不符合JS语法规范，浏览器无法正常执行。且本次需求不需要修改图片地址，不需要给src重新赋值。
• HTML标签属性缺少分隔空格：第三张<img>标签的id、width属性和后面的属性之间没有加空格，部分浏览器会无法正确识别属性和绑定的事件。

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<title>Task 1</title>
</head>
<body>
<img src="usa.gif" height="200" width="250"/>
<img src="mexico.gif" height="200" width="250"/>
<img id="jamaica" height="200" width="250" onmouseover="setNewImage()" onmouseout="returnOldImage()" src="jamaica.gif"/>

<script>
    // 该数组如果后续没有其他用途可以直接删除
    var myImages = [
        "usa.gif",
        "canada.gif",
        "jamaica.gif"
    ];

    function setNewImage() {
        const jamaicaImg = document.getElementById("jamaica");
        jamaicaImg.height = 400;
        jamaicaImg.width = 500;
    }
    function returnOldImage() {
        const jamaicaImg = document.getElementById("jamaica");
        jamaicaImg.height = 200;
        jamaicaImg.width = 250;
    }
</script>
</body>
</html>

可选优化写法 #

你也可以用setAttribute方法设置属性，写法如下：

function setNewImage() {
    const img = document.getElementById("jamaica");
    img.setAttribute('height', '400');
    img.setAttribute('width', '500');
}

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