Question

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

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

我知道如何遍历所有“图像”元素并调用函数并获取图像尺寸（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）来做到这一点。

Answer 1

这是Fiddle

<强> 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' });
  });

});

将每个图像的尺寸显示为标题或标签

1 个答案: