element.setAttribute(‘style’, ‘attribute :value;’) vs. element.attribute = ‘value’

In javascript is there any difference between using

element.style.setAttribute('width', '150px');




I have seen that keywords won’t work with the first way (like this), but for non-keyword attributes is there a difference?

Both are perfectly valid. Can you give some examples which doesn’t work in second way? Are you aware that attribute names needs to be camelcased first? E.g. element.style.marginTop instead of incorrectly element.style.margin-top. The hyphen is namely an invalid identifier in Javascript.

The only change I have seen is with canvas. But, then, given an element what is difference between


Since I have not found the answer from an expert, only by experience I will say this.

width is an exposed property of the element, as in an object car.color=”red”; setAttribute('color','red') is a function which assigns the value to a property as
in car = {color:'red',setAttribue:function(prop,val){this[prop]=val;}
Seen as a function prototype would be

function element(){
   this.color="blue" // default
   this.setAttribute = function(prop, val){ this[prop]=val;}
car = new element()


Now, the style is a special case, where lets say, is how things are displayed in a transformed way,
not its original. A style will not change the property itself and that is the effect
you see now in canvas, as it was before in images which have too a width height value

How is that? imagine you have a figure of 100×100 pixel original, the figure tag
would have settings in it for height width 100x100px, (same case with canvas) then
by style you change the width height to 200x200px the same image will grow to fit the
new size, will be amplified, but the image itself stills 100×100

Read More:   What does the "$" sign mean in jQuery or JavaScript? [duplicate]

Ok, you can test this so you be confortable with the explanation

have an image

<image id='f' src="https://stackoverflow.com/questions/1875800/whateveritis" width=100 height=100>

See it? is 100x100px

Now add an style


<image id='f' style="width:200px" src="https://stackoverflow.com/questions/1875800/whateveritis" width=100 height=100>

See it? now it is amplified

Now get its attributes

f = document.getElementById('f');

alert(f.width) // you get 200px

alert(f.getAttribute('width')) // you get 100px

So remember working with images, canvas an all, do not base size in styles, but in attributes

The default size of a div or whatever is zero

then you may set its size by styles, but the size in fact remain 0x0px

But most of the time programs will work based on attributes values,
not in styles values.

And, there is another measure, but will be your homework

Then what is the f.scroolWidth, and f.scrollHeight if it is the same as
width and height (when not scrolling of course).

One final point to take into account
Even when I did the example with car, it is different with elements
since the property color is hidden but accesible to styles
This is, the only real property of an element is the one you write
direct in the html tag code or the one you set with setAttribute
because even if you modify

element.width is a style not the attribute itself

so the only way to really change its value will be

element.setAttribute(‘width’, x )

I did read this myself and found another question you may have
you may think, I left the html tag with 100×100 and that is why I get
the alert with 100 instead 200

Read More:   Switch statement for greater-than/less-than

Well, not that is not the case

You can test too for that, do not change the tag as it is

command a f.setAttribute(‘width’,’300′);


alert(f.width) // you get 200px

alert(f.getAttribute('width')) // you get 300px

in JQuery is the same, the only command to change the attribute is $().attr

$().widht and $().css just change the style


Is it important?

Yes, it is, because even when for images and canvas work with the Attribute not the
style, the one which takes visual effect is the style not the attribute
This is, you can set the original size to 200×200 and this will be 200×200
but if you change by style to 300×300 the image will be 300
from then on no matter if you set its attribute to 1000×1000, the image will still
be seen as 300×300
But for example, for a canvas program the image it is working on is a 1000×1000 size.

To set multiple CSS values, the fastest is to use


To use the “recommended” style object, it has to be

el.style.ST1 = 'VA1';
el.style.ST2 = 'VA2';

There is also el.style.setAttribute, but this is even more verbose and should appeal only to Java developers.

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts