Why is JavaScript to make set Width and Height not working


We are adding a little New Year animation to our Homepage.
With JavaScript and CSS transition we want to show a “Happy New Year” image message.
However, the image Width and Height are not transitioning to different sizes no matter what I try!!!
You can see the (test) home page here:

so we have an image: id=“new_year_img”
which JS is supposed to Grow and Shrink. But no matter what JS code I use, either:

	document.getElementById('new_year_img').width = '200px'; 
	document.getElementById('new_year_img').height = '125px';  


	document.getElementById('new_year_img').width = '200'; 
	document.getElementById('new_year_img').height = '125';  

it does not change Size. And via console.log we can see that this id has .width and .height
but the assignment of new values is not working!

WHAT is going on? WHAT is the problem?


What is your CSS doing to those elements?

You have to set the width and height on the element’s style property (with units)… but yes why not use CSS in the first place?

1 Like

I figured out what the problem is/was.
It was missing .style before width and height.
FYI, I got that assignment method searching on Google for:
how to set width of image in javascript

leading to:

but this is false. Since it is based on direct image width and height. rather than CSS based.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.