How to insert a class in CSS?

[2819]

Hi, please bear with me. Because I am a complete beginner to Javascript.

I need to insert a class to the first <li> tag in a certain <ul>.

My customer's CMS does not have to that function.

Could anyone tell me how to do it in Javascript please?

Thanks in advance.

 

[BillyRayPreachersSon]

Assuming you have a pointer to the UL:

ul.getElementsByTagName('li')[0].className = 'wibble';

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[2819]

Thank you for your reply.

I copied it in the external js and link it in the head.

But it still does not give a class to li.

My html codes is this.

<div id="header2">
<div id="menu">
<ul>
<li><a href="#">Forsiden</a></li>
<li><a href="#">Om oss</a></li>
<li><a href="#">Tjenester</a></li>
<li><a href="#">Produkter</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>

.....

And I want to give class="first" in the first li tag.
<li class="first"><.......

 

[BillyRayPreachersSon]

Assuming you have a pointer to the UL:

So you have a pointer to the UL?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[2819]

I am not sure what the pointer means.

But could you tell me what I need to do?

Thanks.

 

[BillyRayPreachersSon]

Now that I've seen your code, yes. Before, we had nothing to go on.

The pointer to the UL can be stored using:

var ul = document.getElementById('menu').getElementsByTagName('ul')[0];

Using this and the code in my first post, you should be able to work something out.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[2819]

Ok,

I put the following, but it still does not work.


var ul=document.getElementById('menu').getElementsByTagName('ul').getElementsByTagName('li')[0].className='first';

What am I doing wrong?

Thanks for your support.

 

[BillyRayPreachersSon]

You've managed to lose a "[0]" somewhere in the copy/paste. Also, if you're setting the property directly (nothing wrong with that) then you can avoid the need to save the variable:

[!][s]var ul = [/s][/!]document.getElementById('menu').getElementsByTagName('ul')[!][0][/!].getElementsByTagName('li')[0].className = 'first';

Aaaah... I'm so spoiled at work as we're using the Prototype JS framework which lets me do this:

$$('#menu li:first-child').addClassName('first');

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[2819]

Thanks Dan,

I have another one in the same page.

<div id="sidebar">
<ul>
<li>
<h2>Undermeny</h2>
<ul class="leave">
<li><a href="#">Undersider 1</a></li>
<li><a href="#">Undersider 2</a></li>
<li><a href="#">Undersider 3</a></li>
<li><a href="#">Undersider 4</a></li>
<li><a href="#">Undersider 5</a></li>
<li><a href="#">Undersider 6</a></li>
</ul>
</li>
</ul>
</div>


And again I want to put class="first" in the first li tag.

I added the code before the </body> tab.

<script type="text/javascript">
document.getElementById("menu").getElementsByTagName("li")[0].className = "first";
document.getElementById("sidebar").getElementsByTagName("ul")[0].getElementsByTagName("li")[0].className = "first";
</script>


The first one works, but the second one doesn't.

What am I doing wrong here?

Thanks for your help.

 

[2819]

Yeap, I got it.

I needed to change 0 in .getElementsByTagName("ul")[0] to [1].

Then voila.

Thanks guys.

 

[BillyRayPreachersSon]

Excellent. You'll get the hang of this JS lark in no time ;-)

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]