Question

我想在点击一个按钮后用三种不同的颜色更改网页的三个字段（即标题，菜单，页脚）。如果我使用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>

Answer 1

<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'
  }
 }

更改网页的主题颜色

1 个答案: