JavaScript与CSS实现网页换肤功能详解

作者：竹影

时间：2026-10-29

本文介绍如何利用JavaScript和CSS实现简单的网页换肤功能。通过定义多套同名但内容不同的CSS文件，结合JS代码动态修改link标签的href属性，即可在用户点击按钮时切换网站外观。示例包含HTML按钮结构、JS切换逻辑及效果展示，适合初学者参考学习。

文章目录

网页换肤功能实现概述

本文通过一个具体实例，展示如何使用JavaScript配合CSS实现网页换肤功能。该方案易于理解和应用，供读者参考借鉴。

本示例预设了三套不同的外观主题，每套主题对应不同文件夹下的同名CSS文件。核心问题在于如何通过JavaScript动态替换并加载这些CSS文件以实现主题切换。

换肤按钮结构

页面中包含三个操作按钮，用于触发换肤动作。


<a id="skin1" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('default')">蓝色皮肤</a><br/><br/>
<a id="skin2" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('gray')">灰色皮肤</a><br/><br/>
<a id="skin3" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('unite')">自定义皮肤</a>

JavaScript核心代码

以下是实现该功能所需的JavaScript代码逻辑。


// 更换主题
function changeCss(cssName) {
  if (document.getElementsByTagName_r("link").length > 0) {
   for(var i = 0 ; i < document.getElementsByTagName_r("link").length; i++){
    var ctrlLink = document.getElementsByTagName_r("link")[i];
    var cssOld = ctrlLink.getAttribute("href");
    var cssNew = cssOld.replace("default", cssName);
    cssNew = cssNew.replace("gray", cssName);
    cssNew = cssNew.replace("unite", cssName);
    ctrlLink.setAttribute("href", cssNew);
   }
  }
}