[Greasemonkey] newbie DOM question

esquifit esquifit at googlemail.com
Mon Feb 6 17:43:39 EST 2006


>From [1]:

"One thing people don't seem to be able to understand is the difference
between attributes and properties of a DOM element. An attribute is a value
set in the HTML/XML source using the form: width="60". In script, you can
retrieve the value of an attribute using the getAttribute function. A
property can be retrieved using the dot syntax such as element.style to get
the style property of an element.

For various architectural reasons, in IE both attributes and properties are
the same thing. There, you can retrieve a attribute using either the
getAttribute or dot syntax, as there is no distinction made between them.
In Mozilla, this is (correctly) not the case. An attribute and property are
distinct entities and may have different values."


It seems that in FF, the "width" property of the img tag can only hold a
number, units or % being not allowed, whereas the "witdth" attribute of the
img tag can. However, attribute and property show always consistent values:

Experiment 1:
im.width
16
im.width = "100%"
100%
im.width
0
im.getAttribute("width")
0
(presumably because "100%" is an invalid value for the property; the width
*property* can only hold absolute values in pixels)

Experiment 2:
im.width
16
im.setAttribute("width", "50%")im.width
8
im.getAttribute("width")50%

The HTML width *attribute* is more flexible and allows relative sizes.

The thing would not work in IE because attributes and properties would
actually be the same.

[1] http://xulplanet.com/ndeakin/archive/2004/12/22/


2006/2/3, Hans Schmucker <hansschmucker at gmail.com>:
>
> How about setting object.style.width instead? That should even  work at
> all
> times, because you don't actually set the property, but only the style
> string which will be used to calculate the width. I haven't tried it
> though.
> _______________________________________________
> Greasemonkey mailing list
> Greasemonkey at mozdev.org
> http://mozdev.org/mailman/listinfo/greasemonkey
>


More information about the Greasemonkey mailing list