How to access ul element's style via DOM2?

Discussion in 'HTML' started by Spartanicus, Nov 9, 2004.

  1. Spartanicus

    Spartanicus Guest

    How do I access the first ul's style via DOM2 from the following code?:

    <body>
    <div id="foo">
    <ul>
    <li><a href="#>foobar</a></li>
    </ul>
    <ul>
    <li><a href="#>foobar</a></li>
    </ul>
    </div>
    </body>

    document.???.[0].style.display="block"

    --
    Spartanicus
    Spartanicus, Nov 9, 2004
    #1
    1. Advertising

  2. On Tue, 09 Nov 2004 12:00:54 +0000, Spartanicus <> wrote:

    > How do I access the first ul's style via DOM2 from the following code?:
    >
    > <body>
    > <div id="foo">
    > <ul>
    > <li><a href="#>foobar</a></li>
    > </ul>
    > <ul>
    > <li><a href="#>foobar</a></li>
    > </ul>
    > </div>
    > </body>


    There are a couple of ways: using getElementsByTagName or walking the
    document tree. Either way will start with:

    if(document.getElementById) {
    var foo = document.getElementById('foo');

    /* Insert here... */
    }

    and use:

    if(foo.getElementsByTagName) {
    var lists = foo.getElementsByTagName('UL');
    if(lists.length) {
    var item = lists[0], style;
    if((style = item.style)) {
    style.<...> = ...;
    }
    }
    }

    or:

    var item = foo.firstChild, style;
    while(item && (1 != item.nodeType)) {item = item.nextSibling;}
    if(item && (style = item.style)) {
    style.<...> = ...;
    }

    Of course, this assumes that your document structure will be exactly as
    indicated. I'm also being more defensive than I possibly need to be.

    Hope that helps,
    Mike


    Code only reviewed, not tested.

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Nov 9, 2004
    #2
    1. Advertising

  3. Spartanicus

    DU Guest

    Spartanicus wrote:

    > How do I access the first ul's style via DOM2 from the following code?:
    >
    > <body>
    > <div id="foo">
    > <ul>
    > <li><a href="#>foobar</a></li>
    > </ul>
    > <ul>
    > <li><a href="#>foobar</a></li>
    > </ul>
    > </div>
    > </body>
    >
    > document.???.[0].style.display="block"
    >


    The easiest way would be

    <ul>
    <li id="idFirstLi"><a href="#">foobar</a></li>
    </ul>

    document.getElementById("idFirstLi").style.display = "block";

    By the way, you're missing closing quotes on the href attribute values.

    DU
    --
    The site said to use Internet Explorer 5 or better... so I switched to
    Mozilla 1.7.3 :)
    DU, Nov 10, 2004
    #3
    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. Simon Brooke
    Replies:
    8
    Views:
    4,166
    Simon Brooke
    Feb 11, 2006
  2. Replies:
    3
    Views:
    125
  3. space on text node DOM2

    , Dec 3, 2005, in forum: Javascript
    Replies:
    3
    Views:
    126
  4. Replies:
    3
    Views:
    155
  5. Replies:
    1
    Views:
    81
Loading...

Share This Page