onhover如何使用jquery获取图像的宽度和高度

Question

我在div中显示了一些div中的图像，并在循环中动态创建了图像。

我需要使用jQuery不使用ID这样

document.getElementById('Image/div id'); 

得到每个图像的宽度和高度，因为将有很多由循环动态创建的图像取决于条件 是这样，有什么办法让图像的高度和宽度，当用户将鼠标悬停/点击

我这个打了很久，在这里被最终希望我得到一个解决方案的图像

Answer 1

你可以使用jQuery on()到处理程序连接到最近的共同父容器。这样，您至少可以控制要让此功能生效的图像的哪个子集。

$('#container').on('mouseover','img',function(){ 
    var width = $(this).width(); 
    var height = $(this).height(); 
}); 

，如：

<div> 
    <img> //will not affect this one since it's not under "#container" 
</div> 
<div id="container"> 
    <img> //the handler affects this one 
    <div> 
     <img> //the handler also affects this one 
    </div> 
</div> 

Answer 2

这是否解决您的问题？

$('img').hover(function() { 
    console.log($(this).width()); 
    console.log($(this).height()); 
}); 

Answer 3

使用$(this)来指代图像被徘徊。

$("#div_id").hover(function(){ 
    alert("H:" + $(this).height() + " W:" + $(this).width()); 
}); 

Answer 4

我建议，如果你想在页面上显示这样的信息：

$('img').hover(
    function(){ 
     var h = $(this).height(), 
      w = $(this).width(); 
     $('<div />').insertAfter($(this)).text('height: ' + h + '; width: ' + w +'.'); 
    }, 
    function(){ 
     $(this).next('div').remove(); 
    }); 

JS Fiddle demo。

---

几乎毫无意义编辑让它有点漂亮通过减少调用$(this)和它连接到一些CSS：

$('img').hover(
    function(){ 
     var that = $(this), 
      h = that.height(), 
      w = that.width(); 
     $('<div />') 
      .css('width',w) 
      .text('height: ' + h + '; width: ' + w +'.') 
      .insertAfter(that); 
    }, 
    function(){ 
     $(this).next('div').remove(); 
    });​ 

CSS：

div { 
    display: block; 
    position: relative; 
} 

div > div { 
    position: absolute; 
    top: 0; 
    left: 0; 
    color: #f90; 
    background-color: #000; 
    background-color: rgba(0,0,0,0.6); 
} 

JS Fiddle demo。

---

编辑因为jQuery不是为这个效果真的有必要（虽然它确实简化了实施），因此：一个普通的JavaScript替代：

var img = document.getElementsByTagName('img'); 

for (var i=0,len=img.length;i<len;i++){ 
    img[i].onmouseover = function(){ 
     var that = this, 
      h = that.offsetHeight, 
      w = that.offsetWidth, 
      p = that.parentNode, 
      d = document.createElement('div'); 
     d.style.width = w + 'px'; 
     d.textContent = 'Width: ' + w + '; height: ' + h + '.'; 
     p.appendChild(d); 

    }; 
    img[i].onmouseout = function(){ 
     var that = this; 
     that.parentNode.removeChild(that.nextSibling); 
    }; 
}​ 

JS Fiddle demo。

---

最后的编辑（我认为），因为我不记得了node.textContent的相容性，我想这修正案可能帮助低版本的IE的兼容性（采用document.createTextNode()而不是依靠node.textContent/node.innerText和等等...）：

var img = document.getElementsByTagName('img'); 

for (var i=0,len=img.length;i<len;i++){ 
    img[i].onmouseover = function(){ 
     var that = this, 
      h = that.offsetHeight, 
      w = that.offsetWidth, 
      p = that.parentNode, 
      d = document.createElement('div'), 
      text = document.createTextNode('Width: ' + w + '; height: ' + h + '.'); 
     d.appendChild(text); 
     d.style.width = w + 'px'; 
     p.appendChild(d); 

    }; 
    img[i].onmouseout = function(){ 
     var that = this; 
     that.parentNode.removeChild(that.nextSibling); 
    }; 
}​ 

JS Fiddle demo。

虽然我没有IE 7或更低版​​本，但至少在IE 8中起作用。如果有人对IE 6或7中的功能有评论，我会感兴趣的。

参考文献：

• '普通' 的JavaScript：

  • document.createElement。
  • document.createTextNode()。
  • element.offsetHeight。
  • element.offsetWidth。
  • element.style。
  • node.appendChild。
  • node.parentNode。
  • node.removeChild。
  • node.textContent。

• 的jQuery：

  • height()。
  • hover()。
  • insertAfter()。
  • next()。
  • remove()。
  • text()。
  • width()。

Answer 5

$(".img").mouseover(function() { 

    var $div = $(this); 
    var $item = $div.find("img"); 

    var width = $item.width(); 
    var height = $item.height(); 
} 

尝试。