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 相关文章推荐
防止文件缓存的js代码
Jan 10 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
JS的千分位算法实现思路
Jul 31 Javascript
jQuery实现的Div窗口震动特效
Jun 09 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
Bootstrap选项卡动态切换效果
Nov 28 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
Javascript confirm多种使用方法解析
Sep 25 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 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关联链接常用代码
2012/11/05 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
python实用代码片段收集贴
2015/06/03 Python
对numpy中轴与维度的理解
2018/04/18 Python
python读取文件名称生成list的方法
2018/04/27 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
python多线程并发实例及其优化
2019/06/27 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
python 5个实用的技巧
2020/09/27 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
EJB面试题
2015/07/28 面试题
工厂门卫岗位职责范本
2014/04/04 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
影视后期实训报告
2014/11/05 职场文书
道士塔读书笔记
2015/06/30 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python