Question

我在我的网页中显示div中的一些图像，div和图像是通过循环动态创建的。

我需要使用jquery来获取每个图像的宽度和高度，而不使用像这样的id

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

因为循环动态创建的大量图像取决于条件那么，当用户悬停/单击图像时，有没有办法获得图像的高度和宽度

我对此持续了很长时间并且最终希望我得到一个解决方案

Answer 1

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

$('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兼容（使用{{1}而不是依赖document.createTextNode() / node.textContent等等......）：

node.innerText

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 2

您可以使用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 3

这会解决您的问题吗？

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

Answer 4

使用$(this)来引用正在悬停的图像。

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

Answer 5

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

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

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

试试这个。

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

5 个答案: