Question

主页面上有3个按钮，蓝紫色和红色。（在简单的<button></button>中）我将如何制作它以使按钮改变其余页面的颜色？

例如。网站上的当前配色方案是红色的。但我希望如此，当按下蓝色按钮时，红色的一切都变成蓝色。

修改

所以我继续使用下面的例子

<button ng-click="changeTheme(blue)" class="btn btn-info">Blue</button>
    <script type="text/javascript">
    var app = angular.module('app',[]);
    app.controller('mainCtrl', function($scope) {
      $scope.theme = 'blue  ';
      $scope.changeTheme = function(theme) {
        $scope.theme = theme;
      }
    });
    </script>
    <style>
      .red btn btn-info{
        background-color: red;
      }
      .blue btn btn-info{
        background-color: blue;
      }
    </style>

这是一个按钮，IT应该将按钮的颜色更改为蓝色按钮（此评论下方的按钮），任何想法我做错了什么？

<div class="form-group row">
    <div class="col-xs-6 col-xs-offset-3">
      <div ng-app="app" ng-class="theme" ng-controller="mainCtrl">
        <a ui-sref="package" class="btn btn-block btn-info">
            Choose Package &nbsp <span class="glyphicon glyphicon-circle-arrow-right"></span>
        </a>
      </div>
    </div>
</div>

Answer 1

以下是一段关于如何做到这一点的代码：

<div ng-class={{colorScheme}}>

    <button ng-click="colorScheme = 'red'">ColorScheme Red</button>
    <button ng-click="colorScheme = 'blue'">ColorScheme Blue</button>
    <button ng-click="colorScheme = 'green'">ColorScheme Green</button>

    <p>Awesome content</p>

</div>

的CSS：

.red { background-color: red; }
.red p { /*whatever*/ }

.blue { background-color: blue; }
.blue p { /*whatever*/ }

.green { background-color: green; }
.green p { /*whatever*/ }

Answer 2

您可以在DOM的根目录上切换CSS类。

为此，您可以使用ng-class绑定元素的CSS类：

<div ng-class="theme">

这会将类绑定到元素范围中的属性 theme 。然后可以根据需要更改主题的内容。

示例：

＆＃13;

var app = angular.module('app', []);
app.controller('mainCtrl', function($scope) {
  $scope.theme = 'red';
  $scope.changeTheme = function(theme) {
    $scope.theme = theme;
  }
});

＆＃13;

.red label {
  background-color: red;
}
.blue label {
  background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="mainCtrl" ng-class="theme">
  <label>Some Text</label>
  <br/>
  <br/>
  <button ng-click="changeTheme('red')">Red</button>
  <button ng-click="changeTheme('blue')">Blue</button>
</div>

＆＃13;

AngularJS在不同的页面中更改colourscheme

2 个答案: