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 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
jquery 事件对象属性小结
Apr 27 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
Apr 15 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
Vue.js动态组件解析
Sep 09 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
redux.js详解及基本使用
May 24 Javascript
详解JS数组方法
Nov 20 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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
PHP7匿名类用法分析
2016/09/26 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
精通JavaScript的this关键字
2020/05/28 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
setTimeout学习小结
2017/02/08 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
Python中常见的数据类型小结
2015/08/29 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
Python 将pdf转成图片的方法
2018/04/23 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
Python如何批量生成和调用变量
2020/11/21 Python
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
设计部经理的岗位职责
2013/11/16 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
新教师培训心得体会
2014/09/02 职场文书
2014年审计工作总结
2014/11/17 职场文书