首页 > 代码库 > Angularjs切换网站配色模式简单示例

Angularjs切换网站配色模式简单示例

2024-08-03 12:00:11   215人阅读

一个网站可以有多种配色方案，例如正常模式，夜间模式等。

简单示例一个通过点击按钮，更换css文件，达到切换配色模式的angularjs 小app。

主要文件有三个：index.html（主文件），white.css（白色背景配色方案css文件），black.css（黑色背景配色方案css文件）。

index.html文件代码如下：

<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href=http://www.mamicode.com/'black.css' id="global-css">>

black.css代码如下：
body
{
	background-color:black;
}

.p1
{
	color:red;
}

.p2{
	color:blue;
}

white.css代码如下：
body
{
	background-color:white;
}


index.html默认使用黑色背景配色方案。点击“white theme”按钮切换为白色背景配色方案，点击“black theme”按钮，切换成黑色背景配色方案。具体示例如下：
在浏览器中运行index.html截图如下：

查看网页源代码，可以看到调用的css文件是black.css：

点击“white theme”按钮，index.html改为白色背景配色方案，网页截图如下：

查看网页源代码，可以看到调用的css文件是white.css：


Angularjs切换网站配色模式简单示例


联系
我们