更改网页的主题颜色
更改网页的主题颜色
提问于 2016-10-05 06: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 06: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
复制
![[踩坑]iconfont Symbol svg引入无法更改颜色](https://ask.qcloudimg.com/http-save/8227338/8085d6cd0702f73780b43af4ab986037.webp)
相似问题
更改网页主题
更改代码颜色主题中的颜色
更改主题轮廓颜色
根据Windows主题更改面板的主题(颜色)
从Eclipse颜色主题更改主题中的突出显示颜色
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
