Javascript：获取图像宽度然后设置类答案

【问题标题】：Javascript: get an image width and than set a classJavascript：获取图像宽度然后设置类
【发布时间】：2012-08-14 14:29:11
【问题描述】：

我想分析一篇文章的每张图片，并为所有小于/等于 400 像素的图片设置一个类（为大于 400 像素的图片设置一个类），以便我可以给它们一个特定的样式。

在 jQuery 中可能是这样的

$('div#content').find('img').each(function () {
    var $this = $(this), width = $this.width();
     if (width <= 400) {
     $this.addClass('small_img');
}

var $this = $(this), width = $this.width();
    if (width > 400) {
    $this.addClass('large_img');
}       
});

但我需要它使用纯 Javascript。作为一个愚蠢的记者和网页设计师，我不明白......如果你能帮助我，我将非常感激。

【问题讨论】：

标签： javascript class image

【解决方案1】：

你的意思是像这样快速又短的东西？

window.onload = function() {
   var n=document.getElementById('content').getElementsByTagName('img'), 
       i=n.length;
   while(i--){
       n[i].className = n[i].clientWidth > 400 ? 'large_img' : 'small_img' ;
   }
};

有关工作示例，请参阅 this fiddle。

另请阅读 SO 上的 this question 以选择获取（计算的）宽度的方法。

【讨论】：

@UnLoCo 打错了，应该有n
@Serjio：很好的收获！谢谢。看来我的是最快的。任何不理解的人都应该谷歌反向while循环。
@Karim Bouchouchi：那么不要忘记接受答案！不客气！
希望我做对了 - 我对这里还很陌生 :D 再次感谢

【解决方案2】：

window.onload = function() {
   var content = document.getElementById('content');
   if (content) {
       var img = content.getElementsByTagName('img');
       for (var i = 0, count = img.length; i < count; i++) {
            if (img[i].offsetWidth <= 400) {
                img[i].className += ' small_img';
            } else {
                img[i].className += ' large_img';
            }
       }
   }
};

【讨论】：

在你的循环中，你使用img作为当前图像，但在循环之上你将它分配给一个NodeList（通过getElementsByTagName）。认为您需要参考当前图像，对吗？
@jfriend00 OP 似乎不想要 jQuery，即“但我需要它是纯 Javascript”。
+1 是唯一真正等待所有图像加载的答案，需要知道它们的大小。
@jfriend00：我相信我的答案还在等待。还是我错过了什么？
@GitaarLAB - 我没有 +1 你的，因为当你把所有东西都塞进两行时，我发现你的代码很难阅读。

【解决方案3】：

这样的事情应该可以工作：

// Find the parent container 'div#content'
var container = document.getElementById( "content" ),
    // Find all images within the parent
    images = container.getElementsByTagName( "img" ),
    // Total number of images to check
    len = images.length,
    // Loop counter
    i = 0,
    // Represents the current image in the loop
    image;

// Loop through all the images
for ( ; i < len; i++ ) {
    // Access the current image
    image = images[ i ];

    // Use the ternary operator to assign one of two classes, based on width
    image.className += ( image.clientWidth > 400 ) ? " large_img" : " small_img";
}

希望对您有所帮助。干杯！

【讨论】：

【解决方案4】：

var contentDiv = document.getElementById('content');
var imgs = contentDiv.getElementsByTagName('img');
for(i=0;i<img.length;i++){
   var img = imgs[i];
   if(img.clientWidth <= 400) img.className += " small_img"
   else                       img.className += " large_img"
}

【讨论】：

for .. in .. 循环最慢