<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
width: 100px;
height: 100px;
border: 1px solid red;
background: black;
color: #fff;
}
.div2{
width: 200px;
height: 200px;
border: 5px solid black;
background:red;
color:green;
}
.div3{
width: 300px;
height: 300px;
border: 10px solid skyblue;
background:orange;
color:pink;
}
</style>
</head>
<body>
<button name="btn1">皮肤1</button>
<button name="btn2">皮肤2</button>
<button name="btn3">皮肤3</button>
<div class="div1">
<span>内容</span>
</div>
<script>
// 换肤效果 --- 设定不同样式效果
// 点击标签,设定不同的css样式
// 可以修改 id属性值,或者class属性值
// 获取不同的标签对象
var oBtn1 = document.querySelector('[name="btn1"]');
var oBtn2 = document.querySelector('[name="btn2"]');
var oBtn3 = document.querySelector('[name="btn3"]');
var oDiv = document.querySelector('div');
// 给标签对象定义不同的点击事件
// 给标签对象添加点击事件,触发事件时,执行的程序是
// 给div标签设定不同的class属性值,加载不同的选择器,执行不同css样式效果
// class关键词在JavaScript中有其他作用
// 在JavaScript中,操作设定class属性,统一都使用className关键词
// 给第一个button标签,添加点击事件
oBtn1.onclick = function(){
// 触发事件时,给div标签设定class属性值为 div1
oDiv.className = 'div1';
}
// 给第二个button标签,添加点击事件
oBtn2.onclick = function(){
// 触发事件时,给div标签设定class属性值为 div2
oDiv.className = 'div2';
}
// 给第三个button标签,添加点击事件
oBtn3.onclick = function(){
// 触发事件时,给div标签设定class属性值为 div3
oDiv.className = 'div3';
}
// 这里的操作是属性值覆盖操作,新设定的属性会覆盖之前设定的属性值
</script>
</body>
</html>
常见的页面换肤操作
最新推荐文章于 2022-04-27 20:51:07 发布