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

页面导航:首页 > 网络编程 > JavaScript > Angularjs切换网站配色模式简单示例

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

来源: 作者: 时间:2016-02-05 11:06 【

一个网站可以有多种配色方案,例如正常模式,夜间模式等。简单示例一个通过点击按钮,更换css文件,达到切换配色模式的angularjs 小app。主要文件有三个:index html(主文件),white

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

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

主要文件有三个:index.html(主文件),white.css(白色背景配色方案css文件),black.css(黑色背景配色方案css文件)。

index.html文件代码如下:





<script
	src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script>
	var myApp = angular.module('App', []);

	myApp.factory('myFac', function() {
		return {
			changeTheme : function(themeFile) {
				//根据ID定位加载css的元素,将其href修改为特定css文件
				document.getElementById('global-css').setAttribute('href',
						themeFile);
			}
		};
	});

	myApp.controller('AppController', function($scope, myFac) {
		//如果是white主题,使用css文件white.css
		$scope.whiteTheme = function() {
			myFac.changeTheme('white.css');
		}
		//如果是black主题,使用css文件black.css
		$scope.blackTheme = function() {
			myFac.changeTheme('black.css');
		}
	});
</script>


	
	
	

test line 1

test line 2


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.截图如下:

\

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

\

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

\

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



Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<