Why are style objects initially null?

S

Stewart

Hi

I am using latest versions of Firebox and Safari.

Why are style properties on Divs (and perhaps other objects) initially set
to null? For the style.* properties to have any effect, I have to set them
manually.

Below is the code listing at the end of the post.

In this example, style.visibility is initially null.. why is it not set to
'visible'?

Likewise the first time the doStuff() function is executed,
alert ( document.getElementById('win').style.top );
-> returns nothing.

Why don't the style properties get populated when the page is loaded?

Thanks.

Stewart



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<LINK REL=StyleSheet HREF="default.css" TYPE="text/css" />

<body>
<script>
function doStuff(button)
{

visible = document.getElementById('win').style.visibility;

if ( visible == 'visible')
{
visible = "hidden";
}
else
{
visible ="visible";
}



document.getElementById('win').style.visibility = visible;
alert ( document.getElementById('win').style.top );

document.getElementById('win').style.top = '40px';


}
</script>

<form>
<div id = 'test'>
<input id = "button" type="button" onclick="doStuff(this)" value="Done"/>
</div>
</form>

<div id="win" class="windowTest">
<table width="20%" id="table">
<tr>
<td>
Stewart Hector
</td>
</tr>
<table>

</span>

</body>


</html>


----- CSS ----------
.windowTest
{
display:block;
background: #FFFFCC;
width:40%;
border-width:2px;
border-color:#00FFFF;
border-style : groove;
top:30%;
position: relative;
left: 10%;
visibility:visible;
}
 
S

Stewart

Sorry about the multiple posts, I don't know how that actually happened - I
posted this message ONCE!
 
R

Richard Cornford

Stewart wrote:
Why are style properties on Divs (and perhaps other objects)
initially set to null?

The recognised properties of an element's - style - object are not
initially set to null. Mostly their default setting is an empty string.

Why don't the style properties get populated when the page is loaded?
<snip>

They do, but the element's - style - object is a representation of its
STYLE attribute, and only values set on that attribute are available on
the - style - object as non-empty strings. Setting a (non-empty string)
value on an element's - style - object is like modifying its STYLE
attribute; it will override all other CSS values applicable to that
element (including values in alternative style sheets such as print
media).

Richard.
 
S

Stewart

Thanks for your reply.

I would expect though .style.visible to be populated for a component, since
its sitting on the html page.

So, what you are saying - <STYLE> needs to be used for the styles to be
populated.. and won't be picked up from the stylesheets?
 
G

Grant Wagner

It would be populated, if you had specified a STYLE attribute on the HTML
element:

Compare the results of:

<span id="test">Test</span>
<script type="text/javascript">
alert(document.getElementById('test').style.visibility);
</script>

to:

<style type="text/css">
span.myClass { visibility: visible; }
</style>
<span id="test" class="myClass">Test</span>
<script type="text/javascript">
alert(document.getElementById('test').style.visibility);
</script>

to:

<span id="test" style="visibility:visible;">Test</span>
<script type="text/javascript">
alert(document.getElementById('test').style.visibility);
</script>

Only the last alerts "visible" because only the last one explicitly set the
STYLE attribute of the SPAN to "visibility:visible;". Since you are the page
author, and you know the initial state of the element, it is trival to add an
extra comparison (or better yet, reverse your comparison) to account for the
default state:

<style type="text/javascript">
function swapVisibility(nodeId) {
if (!document.getElementById) {
return false;
}
var node = document.getElementById(nodeId);
if (!node || !node.style) {
return false;
}
var newVisibility;
if (node.style.visibility != 'hidden') {
// it's already visible (either an empty string or 'visible')
newVisibility = 'hidden';
} else {
// it's not visible
newVisibility = 'visible';
}
node.style.visibility = newVisibility;
// swapVisibility() has some way of telling it's
// caller that the swap either succeeded or failed
// ("success" is defined as the value of
// .style.visibility returning what you just set it to)
// this isn't 100% reliable, the value of .style.visibility
// could be what you set it to and the item may still
// not be visible, but it's better then nothing
return (node.style.visibility == newVisibility);
}
</style>

Of course, if the default state of your node were hidden, you would have to
reverse the comparison above to ensure you catch the default state.
Thanks for your reply.

I would expect though .style.visible to be populated for a component, since
its sitting on the html page.

So, what you are saying - <STYLE> needs to be used for the styles to be
populated.. and won't be picked up from the stylesheets?

--
| Grant Wagner <[email protected]>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-developer/upgrade_2.html
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,900
Latest member
Nell636132

Latest Threads

Top