Angularjs切换网站配色模式简单示例
浏览数：112 /
时间：2015年06月09日
一个网站可以有多种配色方案，例如正常模式，夜间模式等。
简单示例一个通过点击按钮，更换css文件，达到切换配色模式的angularjs 小app。
主要文件有三个：index.html（主文件），white.css（白色背景配色方案css文件），black.css（黑色背景配色方案css文件）。
index.html文件代码如下：
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='black.css' id="global-css">
<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>
</head>
<body ng-app='App' ng-controller='AppController'>
<button ng-click='blackTheme()'>black theme</button>
<button ng-click='whiteTheme()'>white theme</button>
<p class='p1'>test line 1</p>
<p class='p2'>test line 2</p>
</body>
</html>
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：
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
