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

最新推荐文章于 2021-12-15 12:22:24 发布
最新推荐文章于 2021-12-15 12:22:24 发布
阅读量2.3k 收藏
点赞数
分类专栏： html css AngularJs 文章标签： angularjs lightswitch class stylesheet checkbox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunny_forever/article/details/41772653
版权

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

简单示例一个通过点击toggle 按钮，切换body元素的class，达到切换配色模式的angularjs小app。

1. Live范例可以在以下Codepen网址查看： http://codepen.io/ChristyWang/pen/NPxNMx

2. Toggle button源代码由以下网站生成：https://proto.io/freebies/onoff/


3. 主要文件有两个：index.html和main.css。<

最低0.47元/天 解锁文章
cs08211317dn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3.0-vite-antd 实现动态切换主题.zip
10-29
在Vue3.0框架中，配合Vite构建工具和Ant Design Vue 2.0库，实现动态主题切换是一项常见的需求，特别是在开发具有高度定制化界面的Web应用时。本项目"vue3.0-vite-antd 实现动态切换主题.zip"提供了一种实现方式，...
jquery修改body的class和style值的方法
徊忆羽菲
12-23 2835
jquery修改body的class和style值的方法修改body的class、style修改某一个div的class值 修改body的class、style $("body").attr('class', 'nav-md'); $("body").attr('style', ''); 修改某一个div的class值 <div class="modal-backdrop"></div> $(".modal-backdrop").attr('class', ''); 修改后 &
AngularCli主题切换
@不喝海之言@
12-15 1649
AngularCli主题切换 首先要说明的是，这是基于Angualr的一个主题切换策略，不附加任何UI框架的主题系统. 经常使用Angular的小伙伴应该都了解，Angular和Scss结合的很好，所以这篇Angular的主题切换策略，也主要以Scss预处理器来做。 我这里使用的AngualrCli的版本为12，还是比较新的。这篇策略可以向下兼容，这个不用担心。 这个策略在其他以scss为预处理器的项目中好像也能实现。 实现效果图： 自定义主题 由于不附加任何UI框架的主题系统，所以要实现
Angularjs切换网站配色模式简单示例1(切换css文件）
晴天的专栏
11-21 3544
一个网站可以有多种配色方案，例如正常模式，夜间模式等。 简单示例一个通过点击按钮，更换css文件，达到切换配色模式的angularjs 小app。 主要文件有三个：index.html（主文件），white.css（白色背景配色方案css文件），black.css（黑色背景配色方案css文件）。 index.html文件代码如下： <script src="https://aja
js 更改body html,通过JavaScript更改body标签样式
weixin_39815410的博客
06-26 4718
我试图编写一个脚本来改变页面的宽度，考虑到用户的客户端宽度。 这件事情是这样的：通过JavaScript更改body标签样式function adjustWidth() {width = 0;if (window.innerHeight) {width = window.innerWidth;} else if (document.documentElement && docume...
网站配色简要论述 文档.docx
10-12
网站配色是网页设计的关键元素，它不仅影响网站的视觉美观，还能传递情感，引导用户的心理反应，从而影响用户体验和品牌认知。色彩理论在网站设计中扮演着至关重要的角色。 首先，我们需要理解色彩的基本概念。三...
网站配色方案样本.doc
12-17
网站配色方案样本.doc
网站配色方案实例.pdf
11-28
网站配色方案实例.pdf
最新流行网站配色方案样本.doc
12-06
最新流行网站配色方案样本.doc
Darken.js:使用 JS 使网站的夜间模式变得容易
07-11
变暗.js 晚上工作已经够辛苦了，为什么还要让你的眼睛承受更多的痛苦呢？ 大多数网站在白色（或至少是明亮的）背景上显示黑色文本。 这在白天很棒，但到了晚上，我们的眼睛需要休息一下。 这就是 Darken.js 的用武之地。 只需在您的页面中添加一行，Darken.js 就会处理剩下的事情。 如果确定文本是暗的，背景是亮的，我们就反转配色方案。 这使得文本在晚上更容易阅读，并减少眼睛疲劳。 这不会影响图像，因为反转的彩色图像即使在晚上也看起来很傻。 Darken.js 可以添加到任何网站，只需包含一些 javascript。 <!--jQuery and are requirements for Darken.js to work --> < script src =" //code.jquery.com/jquery-1.11.0.min.js " > </ script >
angularJs的ng-class切换class
10-19
主要介绍了angularJs的ng-class切换class,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
AngularJS动态切换样式
ChauncyWu的博客
03-27 8370
AngularJS相比原生的js或者jquery有着很大不同，对于一个简单的鼠标点击不同选项，动态切换样式该怎么实现呢。 本文实现的是点击某个标题，标题问题加粗，并随之切换相应的div内容，如下    Ok.，实现过程 1. html代码 推荐
HTML/CSS 自定义开关按钮控件(switch)样式
热门推荐
清风的博客
07-15 7万+
今天这篇文章给大家带来的是在移动端很常见的开关控件。样式主要是通过CSS来定制完成，上一篇博客讲的是自定义滑动条的样式，同样是自定义样式，上一篇是直接通过CSS对 input[type="range"] 进行样式改造，而今天这一篇实现思路是上一次提到过的另一种方案，将input控件隐藏，通过其他标签来完成样式的定制。这样做的好处就在于更加的灵活，这是我们今天所要达到的效果。下面就让我们一起来看看怎
AngularJS 之ng-class 按条件设置class的几种方式
Keep moving on.
09-22 8384
第一种：在dom中将class的值用变量替代，然后在controller函数中设置变量的值。如下所示：  &lt;!DOCTYPE html&gt; &lt;html ng-app="myApp"&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;
网页整体配色切换
updatecn的博客
03-02 370
可以更换一个大标签的类来改所有的整体样式，当然less文件也要预设下不同的类的属性
Angular4 动态修改样式
Martin 的博客
11-16 1万+
定义 classFlag， 在页面中用 ngClass,样式一和样式二切换； 参考：http://yunkus.com/angular-api-ngclass/
各大浏览器清除缓存（cache）详细步骤
晴天的专栏
09-09 1万+
1. Firefox 1.1 xu
用html+css+js实现在一个盒子中装下四个模块分别是故障报修模块、设备维修模块配件更换模块以及其他问题模块，模块可以点击用来跳转页面。配色简洁大方
最新发布
05-11
以下是一个简单的代码示例，实现了在一个盒子中装下四个模块，点击可跳转页面。配色为蓝色和灰色，简洁大方： ```html <!DOCTYPE html> <html> <head> <title>模块</title> <style> .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: 500px; background-color: #f2f2f2; } .module { width: 200px; height: 200px; margin: 20px; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: all 0.3s ease-in-out; cursor: pointer; } .module:hover { transform: translateY(-5px); box-shadow: 0 5px 10px rgba(0,0,0,0.3); } .module h2 { margin-top: 0; font-size: 24px; color: #333; } .module p { font-size: 16px; color: #666; } .repair { background-color: #4a90e2; color: #fff; } .maintenance { background-color: #6ab04c; color: #fff; } .parts { background-color: #f5a623; color: #fff; } .other { background-color: #d0021b; color: #fff; } </style> </head> <body> <div class="container"> <div class="module repair" onclick="location.href='repair.html';"> <h2>故障报修模块</h2> <p>点击进入故障报修页面</p> </div> <div class="module maintenance" onclick="location.href='maintenance.html';"> <h2>设备维修模块</h2> <p>点击进入设备维修页面</p> </div> <div class="module parts" onclick="location.href='parts.html';"> <h2>配件更换模块</h2> <p>点击进入配件更换页面</p> </div> <div class="module other" onclick="location.href='other.html';"> <h2>其他问题模块</h2> <p>点击进入其他问题页面</p> </div> </div> </body> </html> ``` 这段代码使用了 flex 布局，让四个模块在一个盒子中居中对齐，并且自动换行。每个模块都是一个 div，里面包含一个标题和一段文本，点击 div 会跳转到对应页面。每个模块的背景色和文本颜色不同，以区分不同的模块。鼠标悬停在模块上时，会有一些动画效果，使页面更加生动。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值