JS17-常见的页面换肤操作

<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>
DcTbnk.
发布了103 篇原创文章 · 获赞 4 · 访问量 2011
私信关注
JS17-常见的页面换肤操作

猜你喜欢
