Javascript:获取图像宽度并设置一个类

Question

我想分析文章的每个图像，并为所有小于/等于 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 的。作为一个愚蠢的记者和网页设计师，我不明白......如果你能帮助我，我将非常感激。

Answer 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用于工作示例。

另请阅读this question SO 用于选择获取(计算的)宽度的方法。