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.

No related content found.

This entry was posted in Javascript and tagged , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*


*

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>