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>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。