AngularJS实现网站换肤实例


Posted in Javascript onFebruary 19, 2021

网站不应该只注重功能,还应该注重用户体验;成熟的大型网站大都具备让用户自行选择主题及颜色的功能,AngularJS也可以做到这点。

效果图:

AngularJS实现网站换肤实例

原理是使用ng-href来动态为网页更换样式:

<link rel="stylesheet" type="text/css" ng-href="{{theme.value}}.css">

代码:

<!DOCTYPE html>
<html ng-app="app" ng-controller="mainCtrl">
<head >
 <meta charset="UTF-8">
 <title></title>
 //动态更新CSS样式
 <link rel="stylesheet" type="text/css" ng-href="{{theme.value}}.css">
 <script src="../angular.js"></script>
 <style type="text/css">
 h1{
  font-style:italic;
 }
 </style>
 <script type="text/javascript">
 angular.module("app", [])
  .controller("mainCtrl", function($scope){
  $scope.options = [
   {
   name:"蓝色",
   value:"blue"
   },
   {
   name:"红色",
   value:"red"
   }
  ];
  //默认选择第一个样式
  $scope.theme = $scope.options[0];
  })
 </script>
</head>
<body>
 <select ng-model="theme" ng-options="c.name for c in options">
 </select>
 <h1>Welcome</h1>
 <ul>
 <li>Home</li>
 <li>About</li>
 <li>Contact</li>
 </ul>
</body>
</html>

blue.css

h1{
 color:blue;
}
ul li{
 display:inline-block;
}

red.css

h1{
 color:red;
}

此文档的作者:justforuse
Github Pages:justforuse

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
详解js树形控件—zTree使用总结
Dec 28 #Javascript
js 轮播效果实例分享
Dec 28 #Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 #Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 #Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 #Javascript
Bootstrap中datetimepicker使用小结
Dec 28 #Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 #Javascript
You might like
PHP和javascript常用正则表达式及用法实例
2014/07/01 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
Python3 集合set入门基础
2020/02/10 Python
python regex库实例用法总结
2021/01/03 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
CSMA/CD介质访问控制协议
2015/11/17 面试题
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
药剂学专业应届生自荐信
2013/09/29 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
七匹狼男装广告词
2014/03/21 职场文书
年会主持词结束语
2014/03/27 职场文书
公安学专业求职信
2014/07/27 职场文书
团队会宣传标语
2014/10/09 职场文书
2014年终个人工作总结
2014/11/07 职场文书
JavaScript的function函数详细介绍
2021/11/20 Javascript