网页换肤效果实现-优快云博客

本文链接：https://blog.youkuaiyun.com/MixedSignals/article/details/105156479

<!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>