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.

score 4 · Accepted Answer · edited May 23 '17 at 11:56

4

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.

edited May 23 '17 at 11:56

Community

1
1

answered Aug 14 '12 at 14:40

GitaarLAB

14,536
11
60
80

@UnLoCo Just a typo, there should be `n` – Sergii Stotskyi Aug 14 '12 at 14:46
@Serjio: good catch! Thanks. Seems mine is by far the fastest. Anyone not understanding should google reverse while loop. – GitaarLAB Aug 14 '12 at 15:24
@Karim Bouchouchi: then don't forget to ACCEPT the answer!! You are welcome! – GitaarLAB Aug 14 '12 at 18:51
Hope I did it right - I am fairly new to this here :D Thanks again – Karim Bouchouchi Aug 15 '12 at 08:10

score 3 · Answer 2 · answered Aug 14 '12 at 14:41

3

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

answered Aug 14 '12 at 14:41

Sergii Stotskyi

5,134
1
22
21

1

inside your loop, you use `img` as the current image, but above the loop you assign it to a NodeList (via `getElementsByTagName`). Think you need to have a reference to the current image, right? – keeganwatkins Aug 14 '12 at 14:43
@jfriend00 OP appears to not want jQuery, i.e. 'But I need it to be in pure Javascript'. – keeganwatkins Aug 14 '12 at 14:46
+1 for the only answer that actually waits for all the images to load which is required to know their size. – jfriend00 Aug 14 '12 at 14:52
@jfriend00: I believe my answer waits to. Or did I miss something? – GitaarLAB Aug 14 '12 at 15:18
@GitaarLAB - I didn't +1 yours because I find your code hard to read when you cram everything into two lines. – jfriend00 Aug 14 '12 at 15:50
@jfriend00: I can make it 3 lines longer if you like? Done. – GitaarLAB Aug 14 '12 at 15:52
@GitaarLAB - More readable. It's about readability, not length. I vote for code I think is correct, readable, easily maintainable and performs well enough for the job at hand. – jfriend00 Aug 14 '12 at 15:57
@jfriend00: so does it pass SO standard now? :P – GitaarLAB Aug 14 '12 at 15:58
@GitaarLAB - I upvoted now. FYI, that's not an SO standard I was talking about, it's my own personal standard for code I think worth upvoting. – jfriend00 Aug 14 '12 at 16:08
@jfriend00: I respect your rep and opinion. You have been longer around here than the couple of weeks I have been. It originally said 'your standard' but I changed it :P thx for the upvote! Edit: since there was just one (long) command inside the while, and the iteration counter was set right after it's collection, I thought 2 lines was good too read. – GitaarLAB Aug 14 '12 at 16:10

score 1 · Answer 3 · answered Aug 14 '12 at 14:41

Something like this should work:

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

Hope that helps. Cheers!

unloco · Answer 4 · 2012-08-14T14:48:06.927

1

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

edited Aug 14 '12 at 14:48

answered Aug 14 '12 at 14:42

unloco

6,928
2
47
58

`for .. in ..` loop is the slowest one – Sergii Stotskyi Aug 14 '12 at 14:46

Javascript: get an image width and than set a class

4 Answers4