关于<li>background-image的问题


<html> 
<head> 
<style> 
#cat-div li { 
  padding-left: 15px; 
  background-repeat: no-repeat; 
  background-position: 0px 5px; 
  line-height: 180%; 
  } 
#cat-div ul { 
  padding: 2px; 
  margin: 0; 
  list-style-type: none; 
} 
</style> </head> 
<body> 
<div id="cat-div"> 
  <ul id="list"> 
    <li>a </li> 
    <li>b </li> 
    <li>c </li> 
    <li>d </li> 
    <li>e </li> 
    <li>f </li> 
    <li>g </li> 
    <li>h </li> 
    <li>i </li> 
  </ul> 
  <script type="text/javascript">    
  var li = document.getElementById("list").getElementsByTagName("li");
  for(var i=0;i<li.length;i++)
   li[i].style.backgroundImage = "url(http://www.google.cn/options/icons/toolbar.gif)";
  </script> 
</div> 
</body> 
</html> 

解决方案 »

  1.   

    <input type="button" onclick="changeImage()" value="change bg image" />
    <script type="text/javascript">   
             function changeImage()
             {
                 var ul=document.getElementById('list');
                 for(var i=0;i<ul.childNodes.length;i++)
                 {
                    ul.childNodes[i].style.backgroundImage='url(../images/cool.gif)';
                 }
             }
    </script>