<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>
JS17-常见的页面换肤操作
猜你喜欢
转载自blog.csdn.net/DcTbnk/article/details/105268535
今日推荐
周排行