|
Posted by Ben C on May 9, 2008, 4:28 pm
Please log in for more thread options > I am a newbie trying to learn the DOM. Can someone tell me why the
> first alert statement returns null, and the second returns the value
> 33px (which was set using the style="top:33px;" in the DIV tag).
>
> Why doesn't the first alert statement pick up the style.left attribute
> from the CSS?
el.style just gives you the value of the style attribute, which in this
case is "top:33px", no more and no less.
The total set of an element's computed styles come from all over the
place: stylesheets, style elements, and the style attribute.
el gets its value for left from the selector in the STYLE element, not
from its style attribute. So left doesn't appear in el.style.
What you might want is window.getComputedStyle which gives you access to
the complete set of computed styles regardless of where they came from.
><html>
><head>
><style type="text/css">
><!--
> DIV.test {position:absolute; left:10px; top:10px; width:100; height:
> 100;}
> -->
></style>
></head>
><body>
><div id="Canvas" class="test" style="top:33px;">canvas</div>
><script type="text/javascript">
> var el=document.getElementById("Canvas");
> alert(el.style.left); //returns null... Why not 10px ???
> alert(el.style.top); //returns 33px
></script>
>
></body>
>
></html>
| 
XML Sitemap