Question

如何使用DOM修改li元素的样式？

   <div id="tabbed-boosts">
     <ul>
      <li>test1</li>
      <li>test2</li>
      <li>test3</li>
     </ul>
    </div>

getElementById（'tabbed-boosts'）。childNodes将我带到UL，如何修改LI？

还需要在IE6中工作......

Answer 1

var lis = document.getElementById( 'tabbed-boosts' ).getElementsByTagName( 'li' );
for ( var i = 0; i < lis.length; i++ )
{
    lis[i].style.backgroundColor = '#' + Math.round( Math.random() * 0xFFFFFF ).toString( 16 );
}

Answer 2

如果您开始使用嵌套列表，则会显示使用document.getElementById（'tabbed-boosts'）。getElementsByTagName（'li'）的问题。使用childNodes属性可以访问该特定ul元素的直接子元素。例如

<ul id='tabbed-boosts'>
   <li>...</li>
   <li>
       <ul>
          <li> ... </li>
       </ul>
   </li>
   <li>... </li>
</ul>

使用getElementsByTag将返回tabbed-boosts子树中的所有'li'元素，其中childNodes将仅返回第一级“li”元素。在上面的示例中，您将使用getElementById接收包含嵌套LI的4个元素的集合，而您只能使用myUl.childNodes（如下所示）接收3个li元素的集合

var myUl = document.getElementById('tabbed-boosts');

var myLi = myUl.childNodes;

for(var i = 0; i<myLi.length; i++)
{
   myLi[i].style....;

   // do whatever you want to the li items;
}

我如何使用DOM来修改它？

2 个答案: