homepage Welcome to WebmasterWorld Guest from 54.204.215.209
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Using JavaScript CSS to change color of child item
Jeremy_H




msg:3150366
 5:29 pm on Nov 8, 2006 (gmt 0)

I have a link with an id, wrapped by a list item.

<li id="i"><a href="...">...</a></li>

Using CSS, I can control the color of the link by using the following command:

#i a{color:#abcdef}

Using JavaScript CSS, I can control the color of the list item using:

document.getElementById("i").style.color="#abcdef";

But how can I use JavaScript CSS to control the color of the link in the list item id?

Thanks

 

birdbrain




msg:3150391
 5:45 pm on Nov 8, 2006 (gmt 0)

Hi there Jeremy_H,

does this help...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
<!--
window.onload=function(){
document.getElementById('foo').onclick=function(){
document.getElementById('i').firstChild.style.color='#abcdef';
return false;
}
}
//-->
</script>

</head>
<body>

<ul>
<li id="foo"><a href="#">click this link</a></li>
<li id="i"><a href="#">to change this color</a></li>
</ul>

</body>
</html>

birdbrain

Fotiman




msg:3150434
 6:19 pm on Nov 8, 2006 (gmt 0)

You could get the child <a> nodes of that list item.

var li = document.getElementById("i");
var anodes = li.getElementsByTagName("a");

Then loop through anodes and apply the style that way. Though you'd probably be better off defining a class and just assigning that class to the list item. For example:

li.selectedItem a { color: #abcdef; }

And then just attach the class to the list item instead of trying to directly modify the style attribute. Easier to maintain.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved