javascript to enlarge img

Question

当“鼠标悬停”发生时，我在尝试更改图像大小时遇到​​了一些问题。

我知道它可以通过css完成，但我需要通过js实现它。

JS代码：

// id is passed to this function.
...
var content = document.getElementById("content");
var li;
// generate lists of img from db.
li = document.createElement("li");      
li.innerHTML = '<img src="' + id + '" />';
content.appendChild(li);
addDomListener(li, 'mouseover', function(){
    li.style.height = '600px';
    li.style.width = '800px';
});

HTML code：

<div>
  <ul id="content">
  </ul>
</div>

似乎是对的，但它不起作用。我怀疑问题是'li.style.height'。谁能告诉我正确的方法来实现它？ THX！

Answer 1

您正在更改li元素本身的高度和宽度，而不是img元素，以替换以下代码：

li.style.height = '600px';
li.style.width = '800px';

这个：

li.firstChild.style.height = '600px';
li.firstChild.style.width = '800px';

Answer 2

您正在更改li元素的尺寸，而不是图像本身，因此行为是预期的。您需要先获取指向图像的指针。

此外，您应该使用jQuery来操作DOM并在鼠标事件上修改元素的样式。它会让你更容易。

Answer 3

更改<img>的尺寸，而不是<li>的尺寸：

var li = document.createElement("li");
var img = document.createElement("img");
img.src = id;
li.appendChild(img);
content.appendChild(li);
addDomListener(li, 'mouseover', function(){
    img.height = '600px';
    img.width = '800px';
});