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

最新推荐文章于 2021-12-15 12:22:24 发布

justforuse

最新推荐文章于 2021-12-15 12:22:24 发布

阅读量2.6k

点赞数

分类专栏： AngularJS 文章标签： angularjs 用户体验换肤网站

本文链接：https://blog.csdn.net/u014291497/article/details/52422497

版权

AngularJS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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

justforuse

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录