js+css實現(xiàn)換膚效果

更新時間：2022年07月03日 05:46:57 作者：吃葡萄不吐葡萄皮嘻嘻

這篇文章主要為大家詳細介紹了js+css實現(xiàn)換膚效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js+css實現(xiàn)換膚效果的具體代碼，供大家參考，具體內(nèi)容如下

效果圖如下：

需求：點擊對應小圓點，下面內(nèi)容顏色跟著改變

主要思路：

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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: