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
setAttribute() Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.
First, select the element by using DOM methods such as document. querySelector() . The selected element has the style property that allows you to set the various styles to the element. Then, set the values of the properties of the style object.
Javascript can be used to change the attribute(s) of a HTML element, such as a paragraph, a header, an image, or a list, or any various HTML elements.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With