選択時にテーマの背景色とテキストの色を変更する方法

角度jsのCSSを使用してユーザーが選択してWebページのスタイルを変更する方法はありますか？選択時にテーマの背景色とテキストの色を変更する方法

私はgoogleで試しましたが、何も私のために働いていません。

私はスタイルを持つ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>

誰でも私にこれを行う方法を提案できますか？

出典

2017-07-06 sudarsan

ng-classは、現在指定しているCSSスタイルではなく、評価するためにanglejs式をとります。

ngClass API docs

だからあなたのマークアップが言う、基本的に変更する必要がある角度evalutes model.webPageSkinはtruthyするたびに、私は「ChangeColor」のCSSクラスをしたいです。あなたはこのようなあなたのコードを変更する必要が

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

出典

2017-07-06 08:17:21 alexhuang

：

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

ng-classのみtrue値がある場合classは

出典

2017-07-06 08:22:43

/*----Plain.css---*/ 
 

 
body{ 
 
\t background-color:grey; 
 
} 
 

 

 
/*----Blue.css-----*/ 
 

 
body{ 
 
\t background-color:blue; 
 
} 
 

 
/*------Default.css------*/ 
 

 
body{ 
 
\t background-color:cyan; 
 
} 
 

 
/*-----Green.css----*/ 
 

 
body{ 
 
\t 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>

適用されます trueと falseのために働きます

同じ名前で4つのcssファイルを作成し、要件ごとに編集することもできます。これで完了です。

出典

2017-07-06 13:09:53

Ur実装はCSSファイルを変更するよう求めていますが、ng-classと関連しています。上記のコードスニペットはselect要素の選択時にCSSファイルを変更し、スタイルシートのhrefを動的に変更します。 –

選択時にテーマの背景色とテキストの色を変更する方法

答えて

関連する問題