網頁的界面設計非常重要，給用戶留下良好的第一印象很重要。一個網頁的樣式要有吸引力，而換膚功能可以讓用戶根據自己的喜好定制網頁的外觀。在JavaScript中，我們可以使用一些方法來實現網頁的換膚功能。
首先，我們需要將每個頁面元素，如標題、段落和按鈕等，賦予不同的CSS類。比如，我們可以在HTML代碼中使用以下代碼：

<code class="language-html"><h1 class="skin1">網頁換膚練習</h1>
<p class="skin2">JavaScript 是一種動態、高級、解釋型的編程語言</p>
<button class="skin3">點此換膚</button>

在CSS樣式表中，我們對每個類別添加各自的顏色：

<code class="language-css">.skin1{
color: #333;
background-color: #f5f5f5;
}
.skin2{
color: #333;
background-color: #e2e2e2;
}
.skin3{
color: #fff;
background-color: #4CAF50;
}

當用戶選擇換膚時，我們可以使用JavaScript更改所有對應類的顏色和背景。
下面，我們來實現給“點此換膚”按鈕添加點擊事件，以觸發換膚功能。添加以下代碼在HTML中的button標簽和 CSS：

<code class="language-html"><button class="skin3" onclick="changeSkin()">點此換膚</button>

<code class="language-css">.skin4{
color: #fff;
background-color: #2196F3;
}

在JS中，我們定義一個changeSkin()函數，該函數使用document.getElementsByClassName()方法來獲取擁有skin1、skin2和skin3類的所有元素，并更新他們的CSS類：

<code class="language-javascript">function changeSkin(){
var skin1 = document.getElementsByClassName("skin1");
var skin2 = document.getElementsByClassName("skin2");
var skin3 = document.getElementsByClassName("skin3");
for(i=0; i<skin1.length; i++){
skin1[i].className += " skin4";
}
for(i=0; i<skin2.length; i++){
skin2[i].className += " skin4";
}
for(i=0; i<skin3.length; i++){
skin3[i].className += " skin4";
}
}

在這個函數中，我們對具有skin1、skin2和skin3CSS類的元素進行循環，每個元素添加skin4CSS類，從而更改它們的顏色和背景。
這個例子只是一個簡單的換膚示例。通過添加更多的CSS類和更多的函數來處理這些類，我們可以創建更多的選擇，并給用戶提供更多的自定義選項，讓他們可以根據個人喜好來搭建網頁的外觀。
總結來說，我們定制不同顏色的CSS類，使用JavaScript獲取具有特定CSS類的元素的引用，通過更改類的屬性來更改網頁的樣式。在編寫JavaScript時，我們應該寫代碼保持簡單、易于理解，并通過使用注釋和清晰的代碼組織來優化它。