Question

I’ve got some problems while trying to change the size of an image when ‘mouseover’ occurs.

I know it can be done by css, but I need to realize it by js.

JS Codes:

// 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 codes:

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

seems right, but it doesn’t work. I suspect the problem is ‘li.style.height’. Could anyone tell me the correct way to realize it? Thx!

Answer 1

You were changing the height and width of li element itself, instead of the img element, for that replace your following code:

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

for this one:

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