javascript - javascript放大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 代码：

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

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

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

Change the size of the <img>, not of the <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';
});