473,388 Members | 1,277 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,388 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 2675
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: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

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.