JavaScript修改样式

作者: Leophen | 来源:发表于2018-12-03 15:28 被阅读0次

（dom的innerHTML和className属性）

实现效果：

582bfb8f0001c8e703060070.jpg

附上代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>innerHTML</title>
    <style type="text/css">
    .red{color:red;}
    </style>
</head>
<body>
    <h3>古文推荐</h3>
    <ul>
        <li>西游记</li>
        <li>红楼梦</li>
        <li>三国演义</li>
        <li>聊斋志异</li>
        <li>论语</li>
        <li>孟子</li>
        <li>中庸</li>
        <li>大学</li>
    </ul>
    <script>
    
    var list=document.getElementsByTagName("li");
    
    for(var i=0;i<list.length;i++){
        
        list[i].innerHTML="第"+[i+1]+"名："+list[i].innerHTML;

        if(i%2==0){

            list[i].className="red";
            
        }
        
    }
    
    </script>
</body>
</html>

注意：在显示第几名时，如果i+1不加中括号，会显示这种效果

582bfb8f0001c8e703060070.jpg