单击一个div以改变/切换img上的class

HTML 代码：

<div id="myDiv"></div> <img id="myImg" src="img.jpg" class="default">

JavaScript 代码：

var myDiv = document.getElementById("myDiv"); var myImg = document.getElementById("myImg");

myDiv.addEventListener("click", function() { myImg.classList.toggle("changed"); });

CSS 代码：

.default { width: 100px; height: 100px; }

.changed { width: 200px; height: 200px; }

说明：

• 在 HTML 代码中，我们创建了一个 div 和一个 img，img 具有一个 class default，它设置了 img 的初始大小。
• 在 JavaScript 代码中，我们获取了 div 和 img 的引用，并正确地使用 addEventListener() 为单击 div 创建了侦听器。
• 在侦听器中，我们使用 classList.toggle() 方法来切换 img 上的 class。如果 img 具有类 changed，则它将被移除，否则它将被添加。
• 在 CSS 代码中，我们为两个类（default 和 changed）分别设置了不同的大小。因此，当 img 的类被切换时，它的大小也会相应地改变。