AngularJS实现网站换肤的简单示例

来源：互联网发布：知错改错不认错的说说编辑：程序博客网时间：2024/06/06 02:16

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

0 0