更改網頁的主題顏色

我想在單擊一個按鈕後用三種不同顏色更改網頁（即標題，菜單，頁腳）的三個字段。如果我使用onclick（）函數，它只會改變字段顏色或改變所有區域的相同顏色。更改網頁的主題顏色

<div ng-style="myStyle" class="header"> 
<h1 style="color:white;padding:20px;">Header</h1> 
</div>enter code here` 

<div class="menu" ng-style="""> 

<br><br><br> 
<h2 style="color:white;margin-left:20px">Menu</h2> 
<br> 
<form class="n1"> 
<p style="color:white;"><b>Choose any color to change the <br/>theme of your website.</b></p><br/> 
<input class="n2" type="button" value="Red" ng-click="myStyle={background:'red'}"><br><br> 
    <input class="n3" type="button" value="Green" ng-click="myStyle={background:'green'}"><br><br> 

    <input class="n4" type="button" value="Yellow" ng-click="myStyle={background:'yellow'}"><br><br> 
    <input class="n5" type="button" value="Lime" ng-click="myStyle={background:'lime'}"><br><br> 
    <input class="n6" type="button" value="Magenta" ng-click="myStyle={background:'magenta'}"><br> 
</form> 
</div>

來源

2016-10-05 KUNDAN KUMAR

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app=''> 
 
<div ng-style="myStyle.header" class="header"> 
 
    <h1 style="color:white;padding:20px;">Header</h1> 
 
</div>enter code here 
 

 
<div class="menu" ng-style='myStyle.body'> 
 

 

 
    <h2 style="color:white;margin-left:20px">Menu</h2> 
 
    <br> 
 
    <form class="n1"> 
 
    <p style="color:white;"><b>Choose any color to change the <br/>theme of your website.</b> 
 
    </p> 
 
    <br/> 
 
    <input class="n2" type="button" value="Red" ng-click="myStyle={header: {background:'red'}, body: {background:'maroon'}}"> 
 
    <br> 
 
    <br> 
 
    <input class="n3" type="button" value="Green" ng-click="myStyle={header: {background:'green'}, body: {background:'darkgreen'}}"> 
 
    <br> 
 
    <br> 
 

 
    <input class="n4" type="button" value="Yellow" ng-click="myStyle={header: {background:'yellow'}, body: {background:'orange'}}"> 
 
    <br> 
 
    <br> 
 
    <input class="n5" type="button" value="Lime" ng-click="myStyle={header: {background:'red'}, body: {background:'pink'}}"> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    </form> 
 
</div> 
 
    </body>

這裏是所有的樣式變化的工作片段。您還沒有添加ng-app，因此沒有提供範圍。這是你想要的嗎？還是其他的東西？這個問題有點模棱兩可。

更新

如果你想爲不同的元素不同的顏色，只需使用嵌套的對象，像這樣：

{ 
header: 
    { 
    background:'red' 
    }, 
body: { 
    background:'maroon' 
    } 
}

來源

2016-10-05 06:18:12 nikjohn

謝謝，我知道這個問題是相當模糊的。我已經添加了ng-app。它的工作方式就像您提供的代碼一樣。但是，如您所看到的，如果我點擊紅色按鈕，它將以紅色更改所有部分。現在，我想要的只是改變不同顏色（可能是紅色）的標題部分和不同顏色（淺紅色）的菜單部分。並在每次點擊顏色格式的按鈕時執行相同的任務。標題應爲實際顏色，菜單將爲其淡（淡）色。 –

更改網頁的主題顏色

回答

相關問題