更改网页的主题颜色

我想在单击一个按钮后用三种不同颜色更改网页（即标题，菜单，页脚）的三个字段。如果我使用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。它的工作方式就像您提供的代码一样。但是，如您所看到的，如果我点击红色按钮，它将以红色更改所有部分。现在，我想要的只是改变不同颜色（可能是红色）的标题部分和不同颜色（浅红色）的菜单部分。并在每次点击颜色格式的按钮时执行相同的任务。标题应为实际颜色，菜单将为其淡（淡）色。 –

更改网页的主题颜色

回答

相关问题