-1

我想遍历页面上的每个图像...

对于每个图像，获取图像的高度和宽度，并将其显示为位于图像上方或下方或旁边的标题或标签或自由文本。显示方法（标题、标签、自由文本）和位置无关紧要，以最简单的为准。

我知道如何遍历所有“图像”元素并调用函数并获取图像尺寸（image.width，image.height）。我只需要知道如何在每个图像附近的页面上显示该信息。我将保持显示文本简单，只是“宽度 x 高度”，例如：220 x 144或220w x 144h.

我不担心确保图像已加载，因为我将在“onload”之后执行循环，或者实际上，更有可能通过按下按钮。

这是一些示例代码： 

function doit(){
  var o,p,q,r,s,t,u;
  o=document.images;
  p=o.length;
  if(p<1){
    alert("No images!");
    return 0;
  }
  for(q=0;q<p;q++){
    r=o[q];
    s=r.src;
    t=r.width;
    u=r.height;
    y=t+'w X '+u+'h'
    /* OK, I now have the image height and width. */
    /*I need to know how to insert 'y' as a 'caption' near each image. */
  }
}

出于测试目的...我已将此代码包装为 Javascript 函数，例如： 

javascript:(function(){function doit(){var o,p,q,r,s,t,u;o=document.images;p=o.length;if(p<1){alert("No images!");return 0;}for(q=0;q<p;q++){r=o[q];s=r.src;t=r.width;u=r.height;y=t+'w X '+u+'h'/* OK, I now have the image height and width. I need to know how to insert 'y' as a 'caption' near each image. */}}})()

所以我可以把它放在一个“书签”中，以便在我正在查看的任何页面上尝试它。我希望只使用javascript（没有JQuery）来做到这一点。

4

1 回答 1

0

这是一个小提琴

HTML

<img src="/" alt="Image"/>
<img src="/" alt="Image"/>
<img src="/" alt="Image"/>
<img src="/" alt="Image"/>
<img src="/" alt="Image"/>
<img src="/" alt="Image"/>

CSS

img {
  width: 250px;  /* For demo purposes */
  height: 200px; /* For demo purposes */
  border: none;
}
.img-wrapper {
  position: relative;
  float: left;
  margin: 0 12px 12px 0;
  border: 1px solid #555;    
}
.img-wrapper span {
  display: block;
  text-align: center;
}

jQuery

$(function() {

  $('img').each(function() {

    var image = $(this),
        imgW  = $(this).outerWidth(),
        imgH  = $(this).outerHeight(),
        size  = '<span>'+imgW+'px X '+imgH+'px</span>';

    $(this).wrap('<div class="img-wrapper">'+size+'</div>');

    $('.img-wrapper').css({ width: imgW + 'px', height: imgH + 20 + 'px' });
  });

});
于 2013-09-12T00:43:31.107 回答