<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>DOM设置css样式</title> <!-- p.style.fontSize=100px; 解读： 设置元素p的样式字体大小=100px; 样式属性不能有“-”符号，要写出驼峰形式 切记，除了getElementById获取到的元素，其他都要通过数组x[i]的索引来对其设置样式，不论获取到的有几个 --> </head> <body> <h3 id="h">前端书籍</h3> <ul id="listWeb"> <li>html基础</li> <li>CSS基础</li> <li>JavaScript基础</li> <li>Jquery框架</li> <li>bootStrap框架</li> </ul> <h3>JAVA书籍</h3> <ul id="listJava"> <li>JAVA语言基础</li> <li>三大框架</li> <li>JAVA深入浅出</li> </ul> <script> var x=document.getElementById("h");//使用变量x获取id=h的h3 x.style.color="blue";//id方法获取的是唯一的，无需使用数组索引 var y=document.getElementsByTagName("h3");//使用变量y获取h3元素 y[1].style.color="red";//数组索引第二个h3并设置样式 var a=document.getElementById("listWeb").getElementsByTagName("li");//使用变量a获取所有前端书籍 for (var i=0;i<=a.length;i++){//使用循环遍历所有前端书籍 a[i].style.fontStyle="italic";//将所有前端书籍设置斜体 if (i==2){ a[i].style.color="green";//将第二个设置字体颜色为绿色 a[i].style.listStyle="none";//将第二个前面的黑点删除 }else{ a[i].style.backgroundColor="grey";//将其他的设置背景颜色为灰色 } } </script> </body> </html>