Monday, July 5, 2010

Create & Modify styles of child elements

Sometimes we need to access the child elements in such cases. Getting the child nodes is not so tough with the below code. Initially we need to have one parent ID to access the child elements inside that.




var cont = document.getElementById('parentcontainer');
var lists = cont.getElementsByTagName("li");

for ( var i = 0; i < lists.length; i++ )
{
lists[i].style.backgroundPosition = 'right 8px';
}


From above example, "cont.ElementsByTagName" is assigned for getting the list tags inside the "parentcontainer". So we had the bundle of list tags. From this bundle we're accessing every single list by the way of "lists[i]". The value of "i" received from the for loop condition.