本节实验流程为：
先在页面中定义一个无序列表。
- <ul>
- <li>京口瓜洲一水间</li>
- <li>钟山只隔数重山</li>
- <li>春风又绿江南岸</li>
- <li>明月何时照我还</li>
- </ul>
- <input type="button" value="隔行变色" id="bianse">
如下：
主要涉及的知识点为：绑定事件、遍历数组和设置样式。
大家可以先动手试试看，实在做不出来时再看下面的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态实现隔行变色</title>
</head>
<body class="" id="body">
<ul>
<li>京口瓜洲一水间</li>
<li>钟山只隔数重山</li>
<li>春风又绿江南岸</li>
<li>明月何时照我还</li>
</ul>
<input type="button" value="隔行变色" id="bianse">
<script type="text/javascript">
//点击按钮 页面的li, 第1，3，5 行背景色设置为红色；第0, 2，4行设置为灰色
//知识点：绑定事件 遍历数组 设置样式
//获取按钮
var btn = document.getElementById('bianse');
//给按钮绑定事件
btn.onclick = function(){
//获取所有的li
var lis = document.querySelectorAll('li');
console.log(lis);
//遍历数组，给每一个li设置背景色（如果是奇数行 红色； 如果是偶数行 灰色）
for(var i=0; i<lis.length; i++){
// console.log(i);
// 给每一个li设置背景色（如果是奇数行 红色； 如果是偶数行 灰色）
if(i % 2 == 0){
// lis[i] 是一个li标签
lis[i].style.backgroundColor = 'gray';
}else{
lis[i].style.backgroundColor = 'red';
}
}
// //使用for in 遍历，会取到 多余的一些属性，不要用来遍历html的结果
// for(var i in lis){
// console.log(i);
// console.log(lis[i]);
// }
}
</script>
</body>
</html>
|
窥视卡
雷达卡
发表于 2023-1-26 22:54:42
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-20 12:41:56
