与或非
开关灯案例:
【相关知识铺垫】
1、元素包含的常用属性：
●className: 存储的是字符串，代表当前元素的类名
●id： 存储的是字符串，代表当前元素的id名
●innerHTML：存储当前元素的所有内容，包含标签
●innerText：存储当前元素的文本内容
●style：存贮当前元素的所有行内样式
●onclick：点击事件属性
●onmouseover：鼠标滑过事件
●onmouseout：鼠标离开事件
2、通过id 获取一个元素：document.getElementById("id名字")
<div id="box1">box1</div>
<script>
var Obox1=document.getElementById("box1");
console.log(Obox1)
</script>
3、通过标签名去获取一类标签:[context].getElementsByTagName;
var olis=document.getElementsByTagName("li"); // 获取文档中左右的li标签
var box1=document.getElementById("box1");
var lis=box1.getElementsByTagName("li");// 获取box1 下面所有的li元素
4、通过style属性去添加或者修改元素的样式
<div id="box1">box1</div>
<script>
var Obox1=document.getElementById("box1");
Obox1.style.backgroundColor="pink";
</script>
5、给元素添加类名
var Obox1=document.getElementById("box1");
Obox1.className="current";
案例之隔行变色
css 实现
如果每隔三行实现一个变色，就是.main>li:nth-child(3n+1) .main>li:nth-child(3n+2) .main>li:nth-child(3n)
js实现奇偶行变色
分析：隔行变色的原理：
操作的元素：li ，
让 处于奇数的li 变一个颜色1
让 处于偶数行的li 变一个颜色2
方法一： 通过style行内属性来改变
方法二：通过添加类名
Plain Text复制代码
<style>
.color1{
background:lightsalmon;
}
.color2{
background:yellow;
}
</style>
for(var i=0;i<lis.length;i++){
if(i%2!=0){
lis[i].className="color1";
}else{
lis[i].className="color2";
}
}
全部用js实现，隔行变色，并且鼠标滑上去的时候，改变颜色，鼠标离开之后，还原原有的颜色
Plain Text复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
li{
height:30px;
line-height: 30px;
}
</style>
</head>
<body>
<ul class="main" id="main" style="background:blue">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
<script>
/*
原理：获取到所有的li元素，如果这个li是偶数我们就让它是一个颜色，如果不是偶数就是另一个颜色
*/
var omain=document.getElementById("main");
var lis=omain.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
if(i%2==0){
lis[i].style.background="blue";
}else{
lis[i].style.background="yellow";
}
// 鼠标滑上li的时候，改变那个li的背景颜色
lis[i].οnmοuseοver=function(){
// 把原有的颜色绑定上去
this.bgColor=this.style.backgroundColor;
this.style.background="lightpink";
}
// 鼠标离开的时候，恢复原有的颜色
lis[i].οnmοuseοut=function(){
this.style.background=this.bgColor;
}
}
</script>
扫一扫
1473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
