0

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

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

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

因为循环会根据条件动态创建很多图像，所以当用户悬停/单击图像时，有什么方法可以获取图像的高度和宽度

我对此很感兴趣，终于来到这里希望我能找到解决方案

4

5 回答 5

2

我建议，如果您想在页面上显示此信息：

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

JS 小提琴演示。

$(this)通过减少对某些 CSS 的调用并将其耦合到一些 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 演示。

编辑是因为 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 演示。

最终编辑（我认为），因为我不记得兼容性了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 演示。

虽然我没有 IE 7 或更低版本，但上述内容至少在 IE 8 中有效。如果有人对 IE 6 或 7 中的功能有意见，我会很感兴趣..！

参考：

于 2012-04-18T09:59:25.303 回答
2

您可以使用 jQueryon()将处理程序附加到最近的公共父容器。这样，您至少可以控制您希望此功能生效的图像子集。

$('#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>
于 2012-04-18T10:03:08.110 回答
0

这能解决您的问题吗？

$('img').hover(function() {
  console.log($(this).width());
  console.log($(this).height());
});
于 2012-04-18T09:57:58.270 回答
0

用于$(this)指代悬停的图像。

$("#div_id").hover(function(){
  alert("H:" + $(this).height() + " W:" + $(this).width() );
});
于 2012-04-18T09:59:12.810 回答
0 
$(".img").mouseover(function() {

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

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

尝试这个。

于 2012-04-18T10:21:42.050 回答