Why are style objects initially null?

Discussion in 'Javascript' started by Stewart, May 19, 2004.

  1. Stewart

    Stewart Guest

    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;
    }
    Stewart, May 19, 2004
    #1
    1. Advertising

  2. Stewart

    Stewart Guest

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

    On 2004-05-18 21:30:50 -0400, Stewart <> said:

    >
    Stewart, May 19, 2004
    #2
    1. Advertising

  3. Stewart wrote:
    <snip>
    > 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.

    <snip>
    > 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.
    Richard Cornford, May 19, 2004
    #3
  4. Stewart

    Stewart Guest

    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?

    On 2004-05-19 05:58:04 -0400, "Richard Cornford"
    <> said:

    > Stewart wrote:
    > <snip>
    > > 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.
    >
    > <snip>
    > > 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.
    >
    >
    >
    Stewart, May 19, 2004
    #4
  5. Stewart

    Grant Wagner Guest

    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.

    Stewart wrote:

    > 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?
    >
    > On 2004-05-19 05:58:04 -0400, "Richard Cornford"
    > <> said:
    >
    > > Stewart wrote:
    > > <snip>
    > > > 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.
    > >
    > > <snip>
    > > > 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.


    --
    | Grant Wagner <>

    * 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
    Grant Wagner, May 19, 2004
    #5
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    5
    Views:
    26,617
    Mike Schilling
    Mar 29, 2006
  2. ulysses
    Replies:
    4
    Views:
    438
    ulysses
    Sep 18, 2003
  3. Mr. SweatyFinger
    Replies:
    2
    Views:
    1,842
    Smokey Grindel
    Dec 2, 2006
  4. Janis Papanagnou
    Replies:
    3
    Views:
    115
    Vince Morgan
    Dec 23, 2006
  5. david.karr
    Replies:
    0
    Views:
    209
    david.karr
    Mar 8, 2008
Loading...

Share This Page