Home > Javascript > CSS list-style-image Property

CSS list-style-image Property

If you are using list tags, like OL, LI, UL etc, there is limited control on the UI, like it will render only like 1, disc etc. Sometimes the we require bulletedlists to be look nice. Here is simple way to modifying the OL and UL tags with custom icons. The list-style-image property in CSS used to replace the existing UL and OL tags marker with an Image.

ol
{
list-style-image: url("newImage.gif");
}

And you can change it dynamically using Javascript.

var links = document.getElementsByTagName("UL");
for(var i=0; i <= links.length - 1; i++)
{
links[i].style.listStyleImage="url(plus.gif)";
}

This code will search all the UL tags and assign images for them.

Categories: Javascript Tags: , ,
  1. No comments yet.
  1. No trackbacks yet.