javascript - Javascript：获取图像宽度然后设置类

Question

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

在 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' ;
   }
};

有关工作示例，请参见此小提琴。

另请阅读关于 SO 的此问题，以选择获取（计算的）宽度的方法。

Answer 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';
            }
       }
   }
};

Answer 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";
}

希望有帮助。干杯!

Answer 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"
}