javascript放大img

当出现“鼠标悬停”时，我尝试更改图像大小时遇到一些问题

我知道这可以通过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';
});

//将id传递给此函数。
...
var content=document.getElementById（“内容”）；
李华；
//从数据库生成img列表。
li=document.createElement（“li”）；
li.innerHTML=''；
内容：儿童（li）；
addDomListener（li，'mouseover'，function（）{
li.style.height='600px'；
li.style.width='800px'；
});

HTML代码：

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

---

似乎是对的，但不起作用。我怀疑问题出在‘李、风格、身高’。谁能告诉我实现它的正确方法吗？谢谢

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

---

此外，您应该使用jQuery来操作DOM，并在鼠标事件上修改元素的样式。这将使您的li操作变得更简单。

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

---

此外，您应该使用jQuery来操作DOM，并在鼠标事件上修改元素的样式。这将使您的类似操作变得更容易。

您更改了

li

元素本身的高度和宽度，而不是

img

元素，因为这样可以替换以下代码：

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

对于这一个：

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

---

您正在更改

li

元素本身的高度和宽度，而不是

img

元素，因此请替换以下代码：

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

对于这一个：

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

---

更改

的大小，而不是

的大小：

---

更改

的大小，而不是

的大小：

---

谢谢回复。我明白你的意思。你能说得更具体一点，我是如何指向img本身的吗？我还不太熟悉jQuery。我们现在可以使用js来实现它吗？jQuery使用CSS选择器选择元素。有一点需要学习，但这是一个非常强大的方法。在您的情况下，最简单的方法是为图像提供一个id（例如“test”），并通过

$（“#test”）

选择它。整个选择器API都在这里等待回复。我明白你的意思。你能说得更具体一点，我是如何指向img本身的吗？我还不太熟悉jQuery。我们现在可以使用js来实现它吗？jQuery使用CSS选择器选择元素。有一点需要学习，但这是一个非常强大的方法。在您的情况下，最简单的方法是为图像提供一个id（例如“test”），并通过

$（“#test”）

选择它。整个选择器API都在这里供您参考，我现在正在实现您的方法，请稍等片刻。@Nelson Thx，它又起作用了！进一步讨论，如果我添加一个，它会是secondChild吗？@RenatoGama JS bin是一个不错的小工具！新来的，不知道有一个。。。对于你发布的问题，可能那里的代码没有作为函数完成。@Matt:不，应该是

li.firstChild.firstChild

。另外请注意，如果插入空格（文本节点）或其他内容，则此操作无效，因此最好使用选择器表达式或指向

img

对象的直接指针（如我的回答中所示）。@Bergi Right，它应该是firstChild.firstChild。谢谢你提醒我！这个方法似乎更简单（现在对我来说），我会认真对待你的答案。Thx为你提供建议，我现在正在实施你的方法，请稍等。@Nelson Thx，再次有效！进一步讨论，如果我添加一个，它会是secondChild吗？@RenatoGama JS bin是一个不错的小工具！新来的，不知道有一个。。。对于你发布的问题，可能那里的代码没有作为函数完成。@Matt:不，应该是

li.firstChild.firstChild

。另外请注意，如果插入空格（文本节点）或其他内容，则此操作无效，因此最好使用选择器表达式或指向

img

对象的直接指针（如我的回答中所示）。@Bergi Right，它应该是firstChild.firstChild。谢谢你提醒我！这个方法似乎更简单（现在对我来说），我会认真对待你的答案。我使用了

height

和

width

属性，这些属性可能会被一些CSS样式所抑制。您可以尝试

img.style….

我使用了

height

和

width

属性，这些属性可能会被一些CSS样式所抑制。您可以尝试

img.style….