更改网页的主题颜色
更改网页的主题颜色
提问于 2016-10-05 14:12:10
我想改变三个领域的网页(即页眉，菜单，页脚)与三种不同的颜色后，点击一个单一的按钮。如果我使用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> 回答 1
Stack Overflow用户
发布于 2016-10-05 14:18:12
<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'
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39866595
复制相关文章
相似问题
腾讯云开发者
