Question

我有以下javascript（在blogspot博客中调整图片大小）：

  var imageTags = document.getElementsByTagName('img');
  for(i = 0 ; i < imageTags.length; i++){
    if( imageTags[i].src.indexOf('/s400/', 0)>-1 ) {
      if(imageTags[i].style.width=='400px' || imageTags[i].width==400) {
      imageTags[i].style.width='556px';
        imageTags[i].style.height='368px';
      } else {
        imageTags[i].style.width='368px';
        imageTags[i].style.height='556px';
      }
      imageTags[i].src=imageTags[i].src.replace('/s400/', '/s556/');

    }
  }

它在Firefox和Chrome上完美运行，但在IE（测试IE9）上似乎总是进入第二个分支，好像imageTags[i].width==400总是评估为false。我如何修复IE浏览器？

编辑：正如所建议的那样，我暂时添加了一个警告来显示图像的宽度，在IE9上它是...... 416.看起来IE在html的宽度上添加了边距。

Answer 1

尝试imageTags[i].offsetWidth==400而不是imageTags[i].width==400
我建议它因为.width属性只获得标签中定义的width，而.offsetWidth获得实际宽度

Answer 2

请运行此操作并告诉您获得的内容 - 目前您调整大小然后加载新图像

var imageTags = document.getElementsByTagName('img');
for(var i=0,n=imageTags.length,img,src,w,h,newImg; i<n; i++) {
  img =  imageTags[i];
  src = img.src;
  if(src.indexOf('/s400/', 0)==-1 ) continue;
  alert(img.width);
  if(img.width==400) {
    w=556;
    h=368;
  } else {
    w=368;
    h=556;
  }
  newImg = document.createElement("img");
  newImg.onload=function() { this.width=w; this.height=h}
  newImg.src=src.replace('/s400/', '/s556/')
  img.parentNode.replaceChild(newImg,img);
}

Answer 3

正如所建议的那样，我检查了IE报告的宽度是多少，而不是400（可能还有边距？）。所以我只是添加了一个明显的黑客来检查400和416.

IE浏览器上的Image.width

3 个答案: