网站换肤，之前感觉总是很神奇啊，今天就来总结一下。我写的就是两种思路。
首先都需要建一个css文件夹，里面存放不同颜色的css文件：blue.css； red.css； yellow.css； green.css 在这几个文件中分别写好要改变的样式。
接下来就是html文件，首先第一种思路：只写一个link标签（不推荐，原因请继续阅读）。代码如下：
<!--index.html-->
<head>
<meta charset="UTF-8">
<title>动态换肤</title>
<link rel="stylesheet" type="text/css" href="css/blue.css">
<style>
*{ margin: 0; padding: 0; }
div{
height: 50px;
background-color: black;
padding-left: 10px;
}
div section{
width: 30px;
height: 30px;
margin: 10px;
display: inline-block;
}
div section:nth-of-type(1){
background-color: red;
}
div section:nth-of-type(2){
background-color: blue;
}
div section:nth-of-type(3){
background-color: green;
}
div section:nth-child(4){
background-color: yellow;
}
</style>
</head>
<body>
<div>
<section data-color="red"></section>
<section data-color="blue"></section>
<section data-color="green"></section>
<section data-color="yellow"></section>
</div>
<script>
var div = document.getElementsByTagName("div")[0];
//添加鼠标单击事件
div.onclick = function(event){
console.log(event.target);
var ele = event.target;
console.log(ele.tagName);//使用.tagName时，控制台输出全部大写，所以在下面的if判断中，使用“SECTION”.
if(ele.tagName == 'SECTION'){
var color = ele.dataset.color;
//var color = ele.getAttribute("data-color");
var link = document.createElement("link");
link.href = 'css/' + color + ".css";
link.rel = "stylesheet";
// 添加样式表到head，但是会造成页面样式表越来越多，所以不推荐
document.head.appendChild(link);
}
}
</script>
</body>第一种思路是只写一个link，然后不断添加样式表到head，但是会造成页面样式表越来越多，所以不推荐。
第二种思路：写4个link标签，然后通过调节link的可用与否来实现网站换肤。代码如下：
<head>
<meta charset="UTF-8">
<title>动态换肤</title>
<link rel="stylesheet" type="text/css" href="css/blue.css">
<link rel="stylesheet" type="text/css" href="css/red.css">
<link rel="stylesheet" type="text/css" href="css/green.css">
<link rel="stylesheet" type="text/css" href="css/yellow.css">
<style>
*{ margin: 0; padding: 0; }
div{
height: 50px;
background-color: black;
padding-left: 10px;
}
div section{
width: 30px;
height: 30px;
margin: 10px;
display: inline-block;
}
div section:nth-of-type(1){
background-color: blue;
}
div section:nth-of-type(2){
background-color: red;
}
div section:nth-of-type(3){
background-color: green;
}
div section:nth-child(4){
background-color: yellow;
}
</style>
</head>
<body>
<div>
<section data-color="0"></section>
<section data-color="1"></section>
<section data-color="2"></section>
<section data-color="3"></section>
</div>
<script>
var links = document.getElementsByTagName('link');
function enableLinks(index){
for(var i = 0;i < links.length; i++){//循环查找4个link标签
//disabled表示关闭，如果i不等于当前index，则disabled就是true，即关闭该link标签
//.sheet表示样式表
links[i].sheet.disabled = i!=index;
}
}
enableLinks(2);
//给div标签添加鼠标点击事件
//event:事件对象
document.querySelector('div').onclick = function(event){
var index = event.target.dataset.color;
console.log(index);
if(index == undefined){
return;
}else{
//调用enableLinks()
enableLinks(index);
}
}
</script>
</body>注意两种方法的html部分section的自定义属性data-color，一个是颜色，一个是数字。
「CSS4」アップデートApr 11, 2025 pm 12:05 PM私が最初にCSS4¹のことを鳴らしたので、それについてもっと多くの議論がありました。私はここで他の人から私のお気に入りの考えをまとめようとしています。がある
3種類のコードApr 11, 2025 pm 12:02 PM新しいプロジェクトを開始するたびに、3つのタイプ、または必要に応じてカテゴリを検討しているコードを整理します。そして、これらのタイプは適用できると思います
HTTPSは簡単です！Apr 11, 2025 am 11:51 AM私は、httpsの複雑さを公に嘆きながら罪を犯しました。過去に、私はサードパーティのベンダーからSSL証明書を購入し、問題がありました
JavaScriptの不変性を理解するApr 11, 2025 am 11:47 AMJavaScriptの不変性を以前に作業したことがない場合は、変数を新しい値または再割り当てに割り当てることと混同しやすいことがわかります。
最新のCSS機能を備えたカスタムスタイリングフォーム入力Apr 11, 2025 am 11:45 AM最近、カスタムチェックボックス、ラジオボタン、トグルスイッチを構築することは完全に可能です。必要でさえありません
HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法Apr 11, 2025 am 11:29 AMプロジェクトにカウントダウンタイマーが必要だったことはありますか？そのようなことのために、プラグインに手を伸ばすのは自然なことかもしれませんが、実際にはもっとたくさんあります
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
