JS17-常见的页面换肤操作

最新推荐文章于 2022-07-21 09:54:52 发布

咩有猫腻.

最新推荐文章于 2022-07-21 09:54:52 发布

阅读量95

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/DcTbnk/article/details/105268535

版权

js 专栏收录该内容

110 篇文章 2 订阅

订阅专栏

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

咩有猫腻.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS17-常见的页面换肤操作

<style> .div1{ width: 100px; height: 100px; border: 1px solid red; background: black; color: #fff; } .div2{ width: 200px; hei...
复制链接

扫一扫

专栏目录