DOM设置css样式
2024-09-04 01:18:32
<!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>
最新文章
- python黑魔法 -- 内置方法使用
- mysql在linux下修改存储路径
- [CentOS Server] Bug when calling matlab in bash
- Node出错导致运行崩溃的解决方案
- hdu-5491 The Next(贪心)
- UI背景构建
- Js练笔——用循环和递归实现追踪对象深度（循环引用关系不考虑）
- JMeter学习-020-JMeter 监听器之【聚合报告】错误率、吞吐量、传输速率实例计算
- javascript插件uploadify简单实现文件上传
- oracle定期运行job
- ECSHOP订单一键发货简化订单发货流程
- 百度地图移动版API 1.2.2版本（Android）地图偏移的最佳解决办法
- JavaScript中的数组
- (译+注解)node.js的C++扩展入门
- C# 程序异常关闭时的捕获
- Linux主机操作系统加固规范
- Ex 2_27 矩阵A的平方是A自乘后的乘积,即AA..._第三次作业
- WebSocket原理与实践(一)---基本原理
- Unity3D 批处理场景的工具
- jmeter测试文件上传接口报错：connection reset by peer: socket write error