本篇內容介紹了“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如何實現換膚效果”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站,小編將為大家輸出更多高質量的實用文章!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。