javascript setAttribute style

Question

I don't get how the two following javascript/css codes can produces different result:

1st:

prev.setAttribute('style', 'position:absolute;left:-70px;opacity:0.4;border-radius: 150px;-webkit-border-radius: 150px;-moz-border-radius: 150px;');

2nd:

            prev.setAttribute('style', 'opacity:0.4;border-radius: 150px;-webkit-border-radius: 150px;-moz-border-radius: 150px;');
            prev.setAttribute('height', size);
            prev.setAttribute('width', size);
            prev.setAttribute('id', 'thumb'+i);
            prev.setAttribute('position', 'absolute');
            prev.setAttribute('left', '-70px');

in the 2nd one, position and left are completely ignored. The result are the same for having the 2 lines of codes and not having them.

It only works if I put prev.style.left, the same thing with position. However setAttribute works for height and width. I really need to know why

Answer 1

position and left are not attributes, they are styles.

width, height and id can be used as attributes or styles, which is why they work in your second example.