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 相关文章推荐
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
React Native 搭建开发环境的方法步骤
Oct 30 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
vuex actions传递多参数的处理方法
Sep 18 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 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
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
php短信接口代码
2016/05/13 PHP
php blowfish加密解密算法
2016/07/02 PHP
PHP反射API示例分享
2016/10/08 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
php use和include区别总结
2019/10/13 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
简单的分页代码js实现
2016/05/17 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
vue实现购物车列表
2020/06/30 Javascript
python实现的一个火车票转让信息采集器
2014/07/09 Python
python的re正则表达式实例代码
2018/01/24 Python
Python安装selenium包详细过程
2019/07/23 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
介绍一下linux文件系统分配策略
2012/11/17 面试题
超市总经理岗位职责
2014/02/02 职场文书
交通志愿者活动总结
2014/06/27 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
护理见习报告范文
2014/11/03 职场文书
先进班组材料范文
2014/12/25 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
python可视化大屏库big_screen示例详解
2021/11/23 Python