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:absol ute; 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.get ElementById("Ca nvas");
alert(el.style. left); //returns null... Why not 10px ???
alert(el.style. top); //returns 33px
</script>
</body>
</html> 5  2692 
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/
On 2008-05-09, Randall <we*********@gm ail.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.getCompu tedStyle 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:absol ute; 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.get ElementById("Ca nvas");
alert(el.style. left); //returns null... Why not 10px ???
alert(el.style. top); //returns 33px
</script>
</body>
</html>
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:absol ute; 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
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/
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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
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 mouse over the image
it doesn't move the line but if I click off the image and move the mouse
the line moves like it's supposed to. Also if I click it off the image
and move the mouse over the image it then works. Something on clicking
the image...
|
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) {
document.getElementById(nameOfDiv).style.visibility='visible';
document.getElementById(nameOfDiv).style.height='auto';
if (nameOfDiv != 'weblogs')
|
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 contraction follows at the bottom of my
message here.
This following line is a big part of my hang-up:
document.getElementById('m1').style.display='none';
|
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 of the questions, that form is hidden and the
next is displayed. Also, as the user answers each question a "count"
variable is updated based on their response. I would like the question
to show up on the left side and the answer to show up in the...
|
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 javascript and make
it work with asp. Any thought, ideas or pointers in the right
direction would be greatly appreciated.
I am getting the following error:
Microsoft JScript runtime error '800a1391'
| | |
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 and sets the value of a label
(lblTotal) to the sum of the three textbox values. The form is in a content
place holder.
I've added the following block of code in my form load.
|
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 sorts) submission.
I can get a unique result, but I want that result to write into a specific <div> tag.
I can now get the unique result to write into the <div> tag area, but the resulting content immediately disappears, and the original <div>...
|
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 iframe's src property. Being that IE does not follow standard and considers an id, name, etc as a qualifying identifier for the document.getElementById object, I double checked to make sure that there's only one instance of id = "servif" and I never use...
|
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 site and so far doing this has
saved about 8KB of javascript (lots of ajax/dynamic elements). I just
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
