1

「マウスオーバー」が発生したときに画像のサイズを変更しようとすると、いくつかの問題が発生します。

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」にあると思われます。誰かがそれを実現する正しい方法を教えてもらえますか? どうも！

4

3 に答える 3

3

次のコードを置き換えるためにli、要素ではなく要素自体の高さと幅を変更していました。img

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

これについて：

li.firstChild.style.height = '600px';
li.firstChild.style.width = '800px';
于 2012-11-28T12:38:52.550 に答える
2

画像自体ではなく、li 要素の寸法を変更しているため、動作は期待どおりです。最初に画像へのポインタを取得する必要があります。

さらに、DOM を操作し、マウス イベントで要素のスタイルを変更するには、jQuery を使用する必要があります。それはあなたのようなものをはるかに簡単にします。

于 2012-11-28T12:37:39.307 に答える
1

：<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';
});
于 2012-11-28T12:43:32.523 に答える