悬停如何使用jQuery获取图像的宽度和高度

Question

I am displaying in my webpage a number of images within a div the div and images are created dynamically with a looping.

I need to get the width and height of the each image by using the jquery without using id like this

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

because there will a lot of images dynamically created by the loop depend upon the conditions so, is there any way to get the height and width of the image when user hover/click the image

I struck with this for a long and been here finally hopes i get a solution

Answer 1

I'd suggest, if you want to show this information on the page:

$('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 .

---

Almost pointless edit to make it a little bit prettier by reducing the calls to $(this) and coupling it to some 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 .

---

Edited because jQuery's not really necessary for this effect (albeit it does simplify the implementation), so: a plain JavaScript alternative:

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 .

---

Final edit (I think) , because I couldn't remember the compatibility for node.textContent , I thought this amendment might aid compatibility with lower versions of IE (using document.createTextNode() instead of relying on node.textContent / node.innerText and so on...):

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 .

While I don't have IE 7, or lower, the above does work in IE 8 at least. If anyone has comments about functionality in IE 6 or 7 I'd be interested..!

References:

• 'Plain' 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

you can use jQuery on() to attach a handler to the nearest common parent container . that way, you can at least control which subset of images you want this function to take effect.

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

like:

<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

Does this solve your issue?

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

Answer 4

Use $(this) to refer to the image being hovered.

$("#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();
}

try this.