Angularjs切换网站配色模式简单示例1(切换css文件）
生活随笔
收集整理的這篇文章主要介紹了
Angularjs切换网站配色模式简单示例1(切换css文件）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一個網站可以有多種配色方案，例如正常模式，夜間模式等。
簡單示例一個通過點擊按鈕，更換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"> <scriptsrc="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：
總結
以上是生活随笔為你收集整理的Angularjs切换网站配色模式简单示例1(切换css文件）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Apache nifi 集群安装
- 下一篇： Hibernate 语句总结