css实现简单换肤

最新推荐文章于 2023-07-25 17:05:03 发布

吃葡萄不吐葡萄皮嘻嘻

最新推荐文章于 2023-07-25 17:05:03 发布

阅读量331

点赞数 1

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

本文链接：https://blog.csdn.net/qq_45695853/article/details/119350792

版权

js 专栏收录该内容

73 篇文章 2 订阅

订阅专栏

效果图如下：
在这里插入图片描述

需求：点击对应小圆点，下面内容颜色跟着改变

主要思路：
1.在css中把对应的样式先写好；
2.获取小圆点给它绑定点击事件；
3.获取当前点击元素的类名；
4.将该类名设置给body；

js主要考察的是获取属性值和设置属性值；

 <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        .dot{
            
            margin:100px auto;
            display: flex;
            justify-content: center;

        }
        .dot li{
            width: 30px;
            height: 30px;
            border-radius: 50%;
           cursor: pointer;
        }
        .dot li:first-child{
            background:pink;
        }
        .dot li:nth-child(2){
            background:green;
        }
        .dot li:nth-child(3){
            background:gold;
        }
        .dot li:last-child{
            background:skyblue;
        }
        .dot li:not(:last-child){
            margin-right: 10px;
        }
        .content{
            margin:100px auto;
            width: 300px;
        }
        .pink .content .banner{
            height: 160px;
            width: 100%;
            background:pink;
        }
        .pink .content li{
            color:pink;
            margin-bottom: 10px;
            border-bottom: 1px dashed pink;
            line-height: 40px;
        }

        .green .content .banner{
            height: 160px;
            width: 100%;
            background:green;
        }
        .green .content li{
            color:green;
            margin-bottom: 10px;
            border-bottom: 1px dashed green;
            line-height: 40px;
        }

        .gold .content .banner{
            height: 160px;
            width: 100%;
            background:gold;
        }
        .gold .content li{
            color:gold;
            margin-bottom: 10px;
            border-bottom: 1px dashed gold;
            line-height: 40px;
        }

        .skyblue .content .banner{
            height: 160px;
            width: 100%;
            background:skyblue;
        }
        .skyblue .content li{
            color:pink;
            margin-bottom: 10px;
            border-bottom: 1px dashed skyblue;
            line-height: 40px;
        }
    </style>

<body class="pink">

    <ul class="dot">
        <li class="pink"></li>
        <li class="green"></li>
        <li class="gold"></li>
        <li class="skyblue"></li>
    </ul>

    <div class="content">
        <div class="banner"></div>
        <ul>
            <li>奶茶</li>
            <li>火锅</li>
            <li>串串</li>
            <li>烤肉</li>
        </ul>
    </div>

    <script>
        window.onload = function(){
            let lis = document.querySelectorAll('.dot li');
            let body = document.querySelector('body');
            for(let i=0;i<lis.length;i++){
                lis[i].addEventListener('click',function(){
                    // 获取属性值：元素名.属性名  设置属性值：元素名.属性名 = 属性值 ；  移除属性：元素名.属性名 = "";(此种方法不能获取，设置，移除自定义属性)
                    
                    //获取属性值 ：元素名.getAttribute('属性名')  ;设置属性值：元素名.setAttribute('属性名'，'属性值') ；移除属性：元素名.removeAttribute('属性名') （此种方法能获取，设置，移除自定义属性，可对任何属性有效）
                    let color = this.getAttribute('class')
                    body.setAttribute('class',color)
                })
            }
        }
    </script>
</body>

吃葡萄不吐葡萄皮嘻嘻

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
css实现简单换肤

效果图如下：需求：点击对应小圆点，下面内容颜色跟着改变主要思路：1.在css中把对应的样式先写好；2.获取小圆点给它绑定点击事件；3.获取当前点击元素的类名；4.将该类名设置给body；js主要考察的是获取属性值和设置属性值； <style> *{ margin:0; padding:0; list-style: none; } .dot{
复制链接

扫一扫