AngularJS实现网站换肤实例  更新时间:2021年02月19日 10:35:40   作者:justforuse   这篇文章主要为大家详细介绍了AngularJS实现网站换肤的简单实例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 网站不应该只注重功能,还应该注重用户体验;成熟的大型网站大都具备让用户自行选择主题及颜色的功能,AngularJS也可以做到这点。 效果图: 原理是使用ng-href来动态为网页更换样式: 代码: //动态更新CSS样式 Welcome Home About Contact blue.css h1{ color:blue; } ul li{ display:inline-block; } red.css h1{ color:red; } 此文档的作者:justforuse Github Pages:justforuse 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。 您可能感兴趣的文章: js+css简单实现网页换肤效果 js动态修改整个页面样式达到换肤效果 Javascript结合css实现网页换肤功能 js实现简单的网页换肤效果 js简单实现网页换肤功能 JavaScript实现换肤功能 javascript实现动态CSS换肤技术的脚本 JS实现换肤功能的方法实例详解 js实现一键换肤效果 JS实现网站换肤 AngularJS 网站换肤 相关文章 AngularJS 过滤器的简单实例 本文主要介绍AngularJS 过滤器,这里提供详细了AngularJS 过滤器详细资料,并提供简单实例,有需要的朋友可以参考下 2016-07-07 Angularjs使用ng-repeat中$even和$odd属性的注意事项 无可否认angularjs的崛起成为前端很大的福利,最近接到项目,框架便选中了angularjs。angularjs最吸引人的地方就是数据的双向绑定和指令了,这篇文章主要介绍了Angularjs中使用ng-repeat的$even和$odd属性的注意事项,需要的朋友可以参考下 2016-12-12 AngularJS过滤器filter用法实例分析 这篇文章主要介绍了AngularJS过滤器filter用法,结合实例形式分析了过滤器filter的定义与使用技巧,需要的朋友可以参考下 2016-11-11 angularjs封装$http为factory的方法 本篇文章主要介绍了angularjs封装$http为factory的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-05-05 Angular 通过注入 $location 获取与修改当前页面URL的实例 这篇文章主要介绍了Angular 通过注入 $location 获取与修改当前页面URL的实例代码,需要的朋友可以参考下 2017-05-05 Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解 这篇文章主要给大家介绍了关于Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。 2018-03-03 Angular 中使用 FineReport不显示报表直接打印预览 这篇文章主要介绍了Angular 中使用 FineReport不显示报表直接打印预览,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 2019-08-08 AngularJS 最常用的八种功能(基础知识) 这篇文章主要介绍了AngularJS 最常用的八种功能,非常不错,具有参考借鉴价值,需要的的朋友参考下吧 2017-06-06 AngularJs定时器$interval 和 $timeout详解 这篇文章主要介绍了AngularJs定时器$interval 和 $timeout详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-05-05 Angular2平滑升级到Angular4的步骤详解 最近Angular项目组终于发布了新版——正式版 Angular 4.0.0。所以想着就来尝试下升级,记录下整个升级过程分享给大家,所以这篇文章主要介绍了Angular2升级到Angular4的详细步骤,需要的朋友可以参考下。 2017-03-03 最新评论

网站不应该只注重功能,还应该注重用户体验;成熟的大型网站大都具备让用户自行选择主题及颜色的功能,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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • js+css简单实现网页换肤效果
  • js动态修改整个页面样式达到换肤效果
  • Javascript结合css实现网页换肤功能
  • js实现简单的网页换肤效果
  • js简单实现网页换肤功能
  • JavaScript实现换肤功能
  • javascript实现动态CSS换肤技术的脚本
  • JS实现换肤功能的方法实例详解
  • js实现一键换肤效果
  • JS实现网站换肤
张贴在3