日期:2014-05-17  浏览次数:20653 次

怎么改变HTML代码的样式呢?
Java code

<ol>
<li style="display: none;">1111</li>
<li style="display: none;">2222</li>
<li style="display: none;">3333</li>
</ol>


想用js循环控制li里面的样式。
如第一个改成
style="display: list-item;"
到第二个改成
style="display: list-item;"
第一个还原默认样式

------解决方案--------------------
HTML code

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>
    </head>
    <body>
        <ol>
            <li style="display: none;">1111</li>
            <li style="display: none;">2222</li>
            <li style="display: none;">3333</li>
        </ol>        
        <script>
            var $ = function(id){
                return document.getElementById(id);
            };
            var $t = function(tag, cot){
                cot = cot || document;
                return cot.getElementsByTagName(tag);
            };
            
            var lis = $t('li');
            var  len = lis.length;
            var c = 0;
            setInterval(function(){
                for( var i = 0; i < len; i++ ){
                    lis[i].style.display = 'none';
                }
                lis[c].style.display = 'list-item';
                if( c == len - 1 ){
                    c = 0;
                }else{
                    c++;
                }
            }, 1000)
            
        </script>
    </body>
</html>