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 相关文章推荐
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
aspx中利用js实现确认删除代码
Jul 22 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 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
ftp类(myftp.php)
2006/10/09 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
php数组去重实例及分析
2013/11/26 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
EsLint入门学习教程
2017/02/17 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
详解python分布式进程
2018/10/08 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
python实现数据分析与建模
2019/07/11 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
实习生自我评价
2014/01/18 职场文书
小学新教师培训方案
2014/02/03 职场文书
单位委托书范本
2014/04/04 职场文书
学校节能减排方案
2014/06/13 职场文书
经济国贸专业求职信
2014/06/18 职场文书
岗位工作说明书
2014/07/29 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
详解Flask开发技巧之异常处理
2021/06/15 Python
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫
vue elementUI表格控制对应列
2022/04/13 Vue.js