DOM设置css样式

1<!DOCTYPE html>
2<html>
3<head lang="en">
4    <meta charset="UTF-8">
5    <title>DOM设置css样式</title>
6    <!-- 
7        p.style.fontSize=100px;
8        解读：
9        设置元素p的样式字体大小=100px;
10        样式属性不能有“-”符号，要写出驼峰形式
11
12        切记，除了getElementById获取到的元素，其他都要通过数组x[i]的索引来对其设置样式，不论获取到的有几个
13     -->
14</head>
15<body>
16    <h3 id="h">前端书籍</h3>
17    <ul id="listWeb">
18        <li>html基础</li>
19        <li>CSS基础</li>
20        <li>JavaScript基础</li>
21        <li>Jquery框架</li>
22        <li>bootStrap框架</li>
23    </ul>
24    <h3>JAVA书籍</h3>
25    <ul id="listJava">
26        <li>JAVA语言基础</li>
27        <li>三大框架</li>
28        <li>JAVA深入浅出</li>
29    </ul>
30<script>
31    var x=document.getElementById("h");//使用变量x获取id=h的h3
32    x.style.color="blue";//id方法获取的是唯一的，无需使用数组索引
33    var y=document.getElementsByTagName("h3");//使用变量y获取h3元素
34    y[1].style.color="red";//数组索引第二个h3并设置样式
35    var a=document.getElementById("listWeb").getElementsByTagName("li");//使用变量a获取所有前端书籍
36    for (var i=0;i<=a.length;i++){//使用循环遍历所有前端书籍
37        a[i].style.fontStyle="italic";//将所有前端书籍设置斜体
38        if (i==2){
39            a[i].style.color="green";//将第二个设置字体颜色为绿色
40            a[i].style.listStyle="none";//将第二个前面的黑点删除
41        }else{
42            a[i].style.backgroundColor="grey";//将其他的设置背景颜色为灰色
43        }
44    }
45</script>
46</body>
47</html>

评论区

加载中...

DOM设置css样式

评论区

相关推荐