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:



本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/570540.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【转】在树莓派上实现人脸识别

教程参考地址&#xff1a;http://shumeipai.nxez.com/2018/08/12/facial-recognition-identification-on-raspberry-pi.html 转载于:https://www.cnblogs.com/little-kwy/p/9481259.html

Angularjs切换网站配色模式简单示例2(切换body元素的class)

一个网站可以有多种配色方案&#xff0c;例如正常模式&#xff0c;夜间模式等。 简单示例一个通过点击toggle 按钮&#xff0c;切换body元素的class&#xff0c;达到切换配色模式的angularjs小app。 1. Live范例可以在以下Codepen网址查看&#xff1a; http://codepen.io/Chris…

Eclipse中Maven项目出现红色感叹号问题

在Eclipse环境下&#xff0c;有时我们会遇到Maven项目出现红色感叹号的情形&#xff0c;而一旦项目出现感叹号&#xff0c;Eclipse便无法帮我们进行自动编译等工作&#xff0c;尽管有时候不会影响运行&#xff0c;但每次只能手动启动Maven重新编译&#xff0c;非常不便&#xf…

GitHub 配置及简单使用

一. 初始化 1. 初始化 git 目录 终端中进入到项目文件夹&#xff0c;然后输入以下命令。 git init 命令执行后&#xff0c;文件夹中会多一个.git 文件夹 2. 设置本机关联 GItHub 的用户名和邮箱 git config --global user.name "<username>" git conf…

斐波那契数列 (C#)

斐波那契数列&#xff08;Fibonacci sequence&#xff09;&#xff0c;又称黄金分割数列、因数学家列昂纳多斐波那契&#xff08;Leonardoda Fibonacci&#xff09;以兔子繁殖为例子而引入&#xff0c;故又称为“兔子数列”&#xff0c;指的是这样一个数列&#xff1a;1、1、2、…

Javascript 处理 JSON 数据 示例

最近做了一个 MEAN stack 的 app 。后台用 NodeJS 从 Jira rest api 获得JSON数据并做处理&#xff0c;然后前端用 AngularJS Ajax call 获得处理后的 JSON 数据&#xff0c;显示到 App 上。处理了很多 JSON 数据&#xff0c;决定编一个例子&#xff0c;写一个总结。 JSON 数据…

ansible常用命令

一、ansible常用命令 一、ansible命令的常用参数 ansible 默认提供了很多模块来供我们使用。在 Linux 中&#xff0c;我们可以通过 ansible-doc -l 命令查看到当前 ansible 都支持哪些模块&#xff0c;通过 ansible-doc -s 模块名 又可以查看该模块有哪些参数可以使用。 1、…

2018.08.16 洛谷P2029 跳舞(线性dp)

传送门 简单的线性dpdp。 直接推一推就行了。 貌似三个状态会卡空间啊。。。 笔者分了两个阶段考虑状态转移。 代码&#xff1a; #include<bits/stdc.h> #define N 5001 #define inf 0x3f3f3f3f using namespace std; char xxx; int n,t,f[N][N],s[N],b[N],ans0; ch…

第一个 Rails App 从安装到创建(windows版本)

1. 在以下网址下载并运行 Rails 安装包&#xff1a; 点击打开链接 2. 检查 ruby&#xff0c;sqlite 和 rails 是否安装成功 2.1 查看 ruby 版本&#xff0c; 在命令行中输入&#xff1a; ruby -v 运行截图如下&#xff1a; 2.2 查看 sqlite 版本&#xff0c;在命令行中输入&…

Ruby Variable Scope 简单讲解

Name Begins WithVariable Scope$A global variableAn instance variable[a-z] or _A local variable[A-Z]A constantA class variable 以一个简单例子示例各种变量的区别&#xff1a;class Female# ConstantSEX female# Class variable: shared among all instances of this …

【Luogu P2781】 传教

这题是可以用线段树做的。虽然$n\leq 10^9$可以发现&#xff0c;真正需要用到的节点很少&#xff0c;故动态开点&#xff0c;只有需要用到的时候才新建节点。这里我在下放标记的时候新建节点&#xff0c;因为每操作/查询一个节点都需要先下放标记。时间复杂度$O(m\log n)$&…

P1481 魔族密码 (LIS)

题的连接&#xff1a;https://www.luogu.org/problemnew/show/P1481 简单思路&#xff1a; 就是LIS&#xff0c;最长上升子序列&#xff0c;当然把条件改一下&#xff0c;从模板里的A[ i ]> A[ j ]变成ss[ i ].find(ss[ j ])0&#xff1b;即可。好好理解最长上升子序列。是不…

Rails Minitest style 指南

In the test, we should use the ‘describe’, ‘context’, ‘it’ structure. Here I use a controller test as an example. I have this my_controller.rb with two controller actions: class MyController < ApplicationControllerdef controller_action_1# Code g…

浅谈离散数学中数理逻辑与集合论的数学本质

申华 , 张胜元 - 《大学教育》 - 2013 离散数学本质上是一门数学课程&#xff0c;是学生数学知识结构和数学素质的重要组成部分。数学这门学科体系虽然很庞大&#xff0c;但大致可分为连续型、离散型和随机型这三大类。在大多数的理工科专业的课程设计中&#xff0c;数学…

Rails用DELETE method提交表单讲解

Sometimes we need to submit form using methods other than ‘post’, in this example, it’s ‘delete’. For example, I wanted to delete a user when a form is submitted with the user name and ‘delete’ method. 1. I created the route like this: delete ‘test…

【PAT】B1055 集体照(25 分)

很简单的two points问题 ##注意&#xff1a;K是行数 #include<stdio.h> #include<string.h> #include<map> #include<vector> #include<algorithm> using namespace std; struct people{char name[10];int height; }arr[10005]; bool cmp(people…

luogu 4768

kruskal 重构树对于一张无向图&#xff0c;我们在进行 kruskal 的过程中每当合并两个联通块时新建虚拟节点 t对于两个联通块的根节点 fau&#xff0c;fav 连无向边(fau, t)&#xff0c;(fav, t) 其中点 t 的点权为两个联通块当前连边的边权对于这道题首先 dijkstra 处理所有点到…

使用DreamHost当GoDaddy域名的服务器 步骤

1. 在GoDaddy管理员页面中改变DNS设置&#xff0c;指向DreamHost Name servers&#xff1a; 进入Domain details page: 目前在 SETTINGS -> Nameservers. 数值还是默认值: NS11.DOMAINCONTROL.COM NS12.DOMAINCONTROL.COM 我们需要将它修改为 DreamHost nameservers: …

PAT乙级1011.A+B和C (15)(15 分)

给定区间[-2^31^, 2^31^]内的3个整数A、B和C&#xff0c;请判断AB是否大于C。 输入格式&#xff1a; 输入第1行给出正整数T(<10)&#xff0c;是测试用例的个数。随后给出T组测试用例&#xff0c;每组占一行&#xff0c;顺序给出A、B和C。整数间以空格分隔。 输出格式&#x…

有用的 Google Analytics Chrome 插件推荐

1.Google Analytics Debugger Debbuger 会列出所有执行的命令以及传过去的参数。 例如&#xff0c;常见的命令有&#xff1a; 初始化 Google Analytics&#xff0c; 传送页面访问 和传送事件。 https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmf…