Javascript - Change inline css for specific element

Question

if(document.getElementsbyclassname("tile").style.width = 512) {
   document.querySelectorAll(".tile").forEach(function(element) {
    element.style.width = "25%";
    element.style.height = "auto";
    element.style.position = "initial";
});
}

Hi, i have a photo gallery plugin in Wordpress and it automatically inserts photos using an inline width style in all photos divs.

I need that, when i add a 512px photo, width will become 25%, and when i add a 1024 px photo, width became 50%.

This code turns all the photos into 25% width, regardless of my if.

What's wrong?

Answer 1

Roman Bobrik and Pointy are correct in that '=' is for assignment, while '==' or '===' are for comparison. For example:

var x = 11; 

Sets the variable x equal to eleven. While:

x === 11

Will compare x to eleven to see if they have the same value. I would also like to add that

getElementsbyclassname 

Should be correctly capitalized to getElementsByClassName for it to work.

Width should be, as teemu pointed out, a string with 'px' at the end denoting the unit of measurement, ie element.style.width = "512px".

Furthermore what you are attempting here is a little odd. You first check to see if any tile elements exist with a certain width, then loop through all of them adjusting their dimensions - effectively negating the purpose of your conditional. I would agree with Teemu that you most likely want to have the conditional check within the loop.

To clarify (as Teemu seems to have removed his comment) : The reason all your photos are being reduced to a width of 25% is because, while assigning within an if(condition) isn't going to cause an error (at least not on its own), it will automatically present as truthy and the if(){ code block } will execute. Because the code block always executes, and because you don't distinguish which elements should be reduced to 25%, all elements are therefore reduced to 25% dimensions. If you take heed of the steps above and the comments as well, you should be okay. I hope this has been helpful.