JavaScript修改样式
2018-12-03 本文已影响0人
Leophen
（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
