472,969 Members | 1,505 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,969 software developers and data experts.

document.getElementById newbie question

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
5 2657
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Gary Mayor | last post by:
Hi, I'm re phrasing and earlier question as the earlier question doesn't make to much sense. I using document.onmousemove to move a <div line on the screen. At the moment if I click and move the...
4
by: lawrence | last post by:
Can anyone tell me why this code works in Netscape 7.1 but not in IE??? <SCRIPT type='text/javascript'> function makeVisible(nameOfDiv) {...
7
by: PaulB | last post by:
Good Morning everybody, I'm trying to adapt a tutorial script that will handle the behaviour of an "Expanding/Contracting" site-navigation menu. The code that seems to handle the expansion and...
7
by: Andrea | last post by:
Hi there - I'm hoping someone can help me; I've been struggling with this for a few days! :-) I have a webpage that is comprised of many forms containing questions. As the user answers one...
7
by: dd | last post by:
Hello all. First, I'm a newbie to javascript but not to ASP. Secondly I've been searching for the answer for two hours and I decided to finally post this question. I'm trying to take a...
1
by: Andre Ranieri | last post by:
Hello, I'm trying to set up an ASP.NET 2.0 form where the user enters values in WebControls.TextBoxes for amount owing, interest and late fees and a JavaScript function totals the three values...
8
by: geoffdude | last post by:
Hi everyone, newbie here. I'm really close to finishing my zip code search filter thingy to return a specific message (ultimately a unique phone number for sales contact) after a form query (of...
4
by: dr1ft3r | last post by:
Hey guys, I'm building a site for a landscaping business down the street and can't seem to get part of the code functioning correctly. The code fails on line 68 where I make a reference to an...
29
by: Nick | last post by:
I've seen a few frameworks use the following: function $(id) { return document.getElementById(id); } Then to use: $('something').innerHTML = 'blah'; I'm just trying to roll this out to my...
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
2
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
4
NeoPa
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
1
by: Teri B | last post by:
Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...
0
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...
3
by: GKJR | last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.