Question

有没有办法通过角色js中的CSS用户选择来改变网页的样式。

我在谷歌试过，但没有什么对我有用。

我有一个具有样式的CSS文件。我需要通过改变背景颜色，文本颜色，字体样式来重写所有div中的样式。

    $scope.model.webPageSkin = 'Default';  

    // create the list of themes  
    $scope.bootstraps = [  
        { name: 'Plain', url: 'Plain' },  
        { name: 'Blue', url: 'Blue' },  
        { name: 'Green', url: 'Green' } , 
        { name: 'Default', url: 'default' } , 
    ]; 

**Plain.css**

ChangeColor  
{  
    font-family: "Source Sans Pro",Calibri,Candara,Arial,sans-serif;  
    font-size: 15px;  
    line-height: 1.42857143;  
    color: #333333;  
    background-color: #ddd;  
}  


**default.css**

.ChangeColor  
{  
    font-family: "Source Sans Pro",Calibri,Candara,Arial,sans-serif;  
    font-size: 15px;  
    line-height: 1.42857143;  
    color: #333333;  
    background-color: #3c8dbc;  
}  

<div class="wrapper>
     <header class="main-header">
          <nav class="navbar navbar-static-top" ng-class="{ChangeColor: 
           model.webPageSkin !important;}">
          </nav>
     </header>

<div class="row">
<select  ng-model="model.webPageSkin" ng-options="bootstrap.url as bootstrap.name for bootstrap in bootstraps">  
                </select>
</div>
</div>

有人可以建议我怎么做。

Answer 1

ng-class需要一个angularjs表达式来评估，而不是你当前指定的CSS样式。

ngClass API docs

所以你的标记需要改为基本上说，只要角度评估model.webPageSkin是真实的，我想要'ChangeColor'的css类。

ng-class="{'ChangeColor': model.webPageSkin}">

Answer 2

你必须改变你的代码：

ng-class="{'ChangeColor': model.webPageSkin==='Default'}">

ng-class仅适用于true和false，如果true值将class将被应用

Answer 3

/*----Plain.css---*/

body{
	background-color:grey;
}


/*----Blue.css-----*/

body{
	background-color:blue;
}

/*------Default.css------*/

body{
	background-color:cyan;
}

/*-----Green.css----*/

body{
	background-color:green;
}

 <!DOCTYPE html>
<html >
    <head>
        
        <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script >
            var app=angular.module('mainApp',[]);
            app.controller('myctrl',function($scope){ 
                 $scope.webPageSkin="Default"; 
          console.log($scope.webPageSkin);

    $scope.bootstraps = [  
        { name: 'Plain', url: 'Plain.css' },  
        { name: 'Blue', url: 'Blue.css' },  
        { name: 'Green', url: 'Green.css' } , 
        { name: 'Default', url: 'Default.css' } , 
    ]; 

            });
        </script>
        
    </head>
    <body ng-app="mainApp" ng-controller="myctrl">
        <div class="wrapper">
        
     <header class="main-header" ng-class="webPageSkin.name">
          <nav  class="navbar navbar-static-top">
          </nav>
     </header>

<div class="row">
<select ng-model="webPageSkin" ng-options="bootstrap.name for bootstrap in bootstraps" ng-init="webPageSkin = bootstraps[0]">
                </select>       
</div>
</div>

<link rel="stylesheet" type="text/css" ng-href="{{webPageSkin.url}}">
    </body>
</html>

使用相同的名称创建四个css文件，也可以根据需要进行编辑。现在已经完成。

如何在选择时更改主题背景颜色和文本颜色

3 个答案: