编程 Javascript

AngularJS实现网站换肤实例

Posted in Javascript onFebruary 19, 2021

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

效果图：

AngularJS实现网站换肤实例

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

代码：

<!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

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

AngularJS实现网站换肤实例

- Author -

justforuse

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

onpropertypchange

Jul 01 Javascript

syntaxhighlighter 使用方法

Jul 02 Javascript

Javascript 命名空间模式

Nov 01 Javascript

关于jquery中全局函数each使用介绍

Dec 10 Javascript

js 获取元素下面所有li的两种方法

Apr 14 Javascript

Javascript技术栈中的四种依赖注入详解

Feb 23 Javascript

jQuery 翻页组件yunm.pager.js实现div局部刷新的思路

Aug 11 Javascript

js通过classname来获取元素的方法

Nov 24 Javascript

ExtJs异步无法向外传值和赋值的完美解决办法

Jun 14 Javascript

JS中的Replace()传入函数时的用法详解

Sep 11 Javascript

动态加载、移除js/css文件的示例代码

Mar 20 Javascript

ES6 Set结构的应用实例分析

Jun 26 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