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

In javascript is there any difference between using

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

and

element.style.width = '150px';

?

I ha开发者_JAVA技巧ve 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

element.width = '100px'
element.style.width = '100px'
element.setAttribute('width','100px')
element.style.setAttribute('width','100px')

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()

car.color = 'red';
or
car.setAttribute('color','red');

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 100x100 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 100x100

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

have an image

<image id='f' src='whateveritis' width=100 height=100>

See it? is 100x100px

Now add an style

 style='width:200px'

<image id='f' style='width:200px' src='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 100x100 and that is why I get the alert with 100 instead 200

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

then

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

Finally

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 200x200 and this will be 200x200 but if you change by style to 300x300 the image will be 300 from then on no matter if you set its attribute to 1000x1000, the image will still be seen as 300x300 But for example, for a canvas program the image it is working on is a 1000x1000 size.

To set multiple CSS values, the fastest is to use

el.setAttribute('style','LIST-OF-STYLES');

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.