Change Element Style (without ID or NAME)

[Contrid]

Hey there,

I want to change the margin of a UL element. This UL element doesn't have an ID or NAME attribute. How can I use getElementsByTagName(); ?

Here is my code :

<ul id="nav">
<li>
    <ul>
        <li>
            <!-- need to change the margin of this UL using JavaScript -->
            <ul></ul>
        </li>
    </ul>
</li>
</ul>

It's a little IE browser hack I'm working on. It's the only way around.
Please help me out. I will really appreciate it.

[Pepejeria]

Why not use CSS?

#nav ul {
    margin:10px;
}

You can access the ul with the following JavaScript

var nav = document.getElementById("nav");
var firstUL = nav.getElementsByTagName("ul")[0];

[Contrid]

Awesome, thanks!
Unfortunately this is a browser hack, so I cannot put it directly in my stylesheet.

I'm assuming that for the second UL, it will look like this :

var mainNav = document.getElementById('nav');
var secondUL = mainNav.getElementsByTagName('ul')[1];

Does that look right?
I'm going to give it a test just now and post back here.

Thanks for your help!

[Contrid]

Awesome, works great!
I used this to work with XML before, but I wasn't really sure.
Not a javascript guru at all.
Learnt something here. Thanks again!

[Pepejeria]

Happy you learned something from this

[Buddy Bradley]

Unfortunately this is a browser hack, so I cannot put it directly in my stylesheet.

It's a CSS rule, so it doesn't belong in your JavaScript. You're just making it more difficult to maintain in the long run.

Most browsers can be directly targetted with CSS hacks/conditional comments.

[Contrid]

It's a CSS rule, so it doesn't belong in your JavaScript. You're just making it more difficult to maintain in the long run.

Most browsers can be directly targetted with CSS hacks/conditional comments.

Thank you for your comments.
Can you please elaborate on your ideas and tell me what you have in mind?

[World Wide Weird]

Technically, getElementsByTagName returns a Collection object, not an Array. So this line:

var secondUL = mainNav.getElementsByTagName('ul')[1];

should be:

var secondUL = mainNav.getElementsByTagName('ul').item(1);

Not that it appears to matter much in this case.

[Buddy Bradley]

Thank you for your comments.
Can you please elaborate on your ideas and tell me what you have in mind?

Which browser are you specifically trying to deliver the extra CSS rule for?

[Contrid]

Which browser are you specifically trying to deliver the extra CSS rule for?

I want to apply this for IE7.
Everything in the site is cross browser, except for this one UL element which has issues in IE7 when set to absolute. Honestly...I've tried everything, but cannot get it right, so I ended up with a browser detection script.

[Raffles]

You're better off using conditional comments as opposed to javascript.

<!--[if gt IE6]> {CSS rules for IE7 here} <![endif]-->

the "gt IE6" means "greater than IE6", i.e. IE7 only.

[Kravvitz]

What happens when the next version of IE comes out? I'd recommend using "if IE 7" instead of "if gt IE 6" (you forgot the space that needs to come before the version number).

Technically, getElementsByTagName returns a Collection object, not an Array. [...] Not that it appears to matter much in this case.

Actually it returns a NodeList, not an HTMLCollection.

In the JavaScript (ECMA Script) binding of the DOM you can use the array notation instead of item(). I never use item() or namedItem(). There is no good reason to write 4 or 9 extra characters every time you reference a node in a NodeList or HTMLCollection.

[Contrid]

You're better off using conditional comments as opposed to javascript.

<!--[if gt IE6]> {CSS rules for IE7 here} <![endif]-->

the "gt IE6" means "greater than IE6", i.e. IE7 only.

Why not just use "if IE" ?
Something like this :

<!--[if IE]>

ul#nav li ul
{
	margin-left:-120px;
}

<![endif]-->

Seems to work just fine...
Thanks alot for all the responses guys! I really appreciate it.
I really didn't know about these CSS rules.

[Raffles]

Well, that does work, but Kravvitz is right, that might break IE8, whenever it comes out.