溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

js+css如何實現換膚效果

發布時間:2022-07-04 09:59:50 來源:億速云 閱讀:578 作者:iii 欄目:開發技術

本篇內容介紹了“js+css如何實現換膚效果”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠學有所成!

效果圖如下:

js+css如何實現換膚效果

需求:點擊對應小圓點,下面內容顏色跟著改變

主要思路:

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>

“js+css如何實現換膚效果”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站,小編將為大家輸出更多高質量的實用文章!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女