为什么第二个事件监听器不起作用？

Question

因此，代码的第一部分创建了一个按钮，单击该按钮可显示图像。 但是，代码的第二部分应该在悬停时使图像变大，但它似乎不起作用。 我通过控制台运行这个鳕鱼，它什么也没给我。 有任何想法吗？

  var button = document.getElementById("image");
var image = document.createElement("img");

button.addEventListener("click", function() {

    image.setAttribute("src", "https://www.w3schools.com/css/trolltunga.jpg");
    image.setAttribute("height", "400");
    image.setAttribute("width", "500");
    document.body.appendChild(image);
});

image.addEventListener("mouseover", function(){
    image.style.width = "700";
    image.style.height = "700";
})

Answer 1

这个想法是正确的，但也可以使用setAttribute作为图像大小：

// Code goes here
window.onload = function() {
var button = document.getElementById("image");
var image = document.createElement("img");

  button.addEventListener("click", function() {
      image.setAttribute("src", "https://www.w3schools.com/css/trolltunga.jpg");
      image.setAttribute("height", "400");
      image.setAttribute("width", "500");
      document.body.appendChild(image);
  });

  image.addEventListener("mouseover", function(){
      image.setAttribute("width", "700");
      image.setAttribute("height", "700");
  });
};

你可以在这个plunker自己尝试一下