Javascript：获取图像宽度，然后设置一个类

我想分析一篇文章的每一幅图像，并为所有小于或等于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');
}       
}); 

$（'div#content'）。查找（'img'）。每个（函数（）{
var$this=$（this），width=$this.width（）；
如果（宽度400）{
$this.addClass（'large_img'）；
}       
}); 

---

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

你是说像这样又快又短的东西

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，以选择获取（计算）宽度的方法。

window.onload=function（）{
var content=document.getElementById（'content'）；
如果（内容）{
var img=content.getElementsByTagName（'img'）；
对于（变量i=0，计数=img.length；i如果（img[i].offsetWidth这样的操作应该可以：

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

//查找父容器“div#content”
var container=document.getElementById（“内容”），
//查找父对象中的所有图像
images=container.getElementsByTagName（“img”），
//要检查的图像总数
len=图像长度，
//循环计数器
i=0，
//表示循环中的当前图像
形象；
//循环浏览所有图像
对于（；i400）？“大img”：“小img”；
}

希望有帮助。干杯！
var contentDiv=document.getElementById（'content'）；
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"
}

var imgs=contentDiv.getElementsByTagName（'img'）；
对于（i=0；i在循环内部，使用
img
作为当前图像，但在循环上方，将其分配给节点列表（通过
getElementsByTagName
）。我想你需要有一个对当前图像的引用，对吗？@jfriend00 OP似乎不想要jQuery，即“但我需要它是纯Javascript的”。+1是唯一一个真正等待加载所有图像的答案，需要知道它们的大小。@jfriend00：我相信我的答案会等待。还是我错过了什么？@GitaarLAB-我没有+1您的，因为当您将所有内容塞进两行时，我发现您的代码很难阅读。
for..in..
loop是最慢的one@UnLoCo只是一个输入错误，应该有
n
@Serjio:很好的捕获！谢谢。看来我的是目前为止最快的。任何不懂的人都应该在循环时用谷歌反向搜索。@Karim Bouchouchi:那别忘了交流接受答案！！不客气！希望我做得对-我对这里还不熟悉：D再次感谢
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"
}