Javascript: get an image width and than set a class

Question

I want to analyse every image of an article and set an class for all images smaller/equal than perhaps 400px (and another class for images bigger than 400px) so that I can give them a specific style.

In jQuery it would be perhaps something like this

$('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');
}       
}); 

But I need it to be in pure Javascript. As a stupid Journalist and Webdesigner I don't get it... If you could help me, I would be very thankful.

Answer 1

You mean something FAST and short like this?

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

See this fiddle for working example.

Also read this question on SO for selecting a method to fetch the (computed) width.

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