By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,702 Members | 1,760 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,702 IT Pros & Developers. It's quick & easy.

document.getElementById newbie question

P: n/a
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?

<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>
Jun 27 '08 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Scripsit Randall:
I am a newbie trying to learn the DOM.
We can see that from your posting a CSS and JavaScript question to an
HTML newsgroup.

Read a book, then a nice FAQ list, and when you ultimately decide to
post a meaningful question, choose the right group and don't forget to
include a URL.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jun 27 '08 #2

P: n/a
On 2008-05-09, Randall <we*********@gmail.comwrote:
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>
Jun 27 '08 #3

P: n/a
Randall wrote:

BTW in addition to Ben's remarks your STYLE has some problems...
<html>
<head>
<style type="text/css">
<!--
^^^^
This is style content, no HTML comments here, You don't need to hide it
from old browsers, nobody is using Netscape 3 or IE 3
DIV.test {position:absolute; left:10px; top:10px; width:100; height:
^^^^
100 what? No units where they are required for non-zero lengths
100;}
^^^^
Same here.
-->
</style>


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Jun 27 '08 #4

P: n/a
Scripsit Jonathan N. Little:
><style type="text/css">
<!--
^^^^
This is style content, no HTML comments here, You don't need to hide
it from old browsers, nobody is using Netscape 3 or IE 3
To be exact, IE 3 recognized <stylemarkup, so the hack was not needed
for it. (The CSS support in IE 3 was awful, but that's a different
issue.) Netscape 3 didn't, but as far as I know, the newest records of
anyone using Netscape 3 for real are from 2005.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jun 27 '08 #5

P: n/a
Jukka K. Korpela wrote:
Scripsit Jonathan N. Little:
>><style type="text/css">
<!--
^^^^
This is style content, no HTML comments here, You don't need to hide
it from old browsers, nobody is using Netscape 3 or IE 3

To be exact, IE 3 recognized <stylemarkup, so the hack was not needed
for it.
Not the copy that I have, but it doesn't need the html comments to hide
the style block contents...
(The CSS support in IE 3 was awful, but that's a different
issue.) Netscape 3 didn't, but as far as I know, the newest records of
anyone using Netscape 3 for real are from 2005.
That person should get out more!

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Jun 27 '08 #6

This discussion thread is closed

Replies have been disabled for this discussion.