<!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>
DOM设置css样式
Stella981
• 阅读
724
点赞
收藏
