ウェブページのテーマの色を変更する

1つのボタンをクリックした後、3つの異なる色でウェブページの3つのフィールド（ヘッダー、メニュー、フッター）を変更したいと考えています。 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を追加しました。あなたが提供したコードのように動作します。しかし、赤いボタンをクリックするとわかるように、すべてのセクションが赤色に変わります。今、私が欲しいのは、異なる色（赤色かもしれない）のヘッダー部分と異なる色（薄い赤色）のメニュー部分を変更することです。彼らのcolor.headerのフォーマット上のボタンをクリックするたびに同じ作業を行う必要があります。実際の色でなければならず、メニューは明るい（薄れた）色になります。 –

ウェブページのテーマの色を変更する

答えて

関連する問題