CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mallander
Mallander

Reputation: 336

JavaScript - set image width from Array of DOM elements

I have the following function that gets all elements with a class:

function imageResize(val) {
    var i;
    var images = (document.querySelectorAll(".product-image"));
    console.log("Function Ran");
    console.log(images.length);
    setTimeout(function() {
        for(i = 0; i < images.length; i++) {
            var imageWidth = images[i].offsetWidth;
            console.log("Old Width = " + images[i].offsetWidth);
            var newWidth = imageWidth/(20-val);
            images[i].style.width = newWidth;
            console.log("New Width = " + images[i].offsetWidth);
        }
    },500);
}

This code is meant to get all the images on the page with a certain class, get their current size, scale it down by a value passed into the function and log the sections for Debug.

The code is not setting the image size at all as both logs are coming back as "60" which is the original image width.

If need here is the HTML of one of the mentioned elements:

jQuery/HTML combo

var imageItem = $("<div class='product-container' style='display: inline-block'><img class='product-image' src='" + imageName + ".png' style='width: auto; height: auto;'></div>");

(The setTimeout is to create a space after doing some DOM work on the class and grabbing it's variables. Without that the variables come back "0")

Upvotes: 1

Views: 1231

Answers (1)

dfsq
dfsq

Reputation: 193261

width style property should be string with px suffix:

images[i].style.width = newWidth + "px";

Upvotes: 1

Related Questions