如何更改颜色按钮，一旦它被选中？如果输入问题
如何更改颜色按钮，一旦它被选中？如果输入问题
提问于 2020-06-13 05:20:50
我有这段代码，我只能改变颜色一次，我希望选择的按钮的颜色改变在每个不同的line.that在每一行将只有一个按钮选择，但每一行。另外，我想添加一个，更多的按钮，这是输入按钮，但有一种方法来创建输入按钮在angularjs-ng-click？我使用angulerjs是因为我想对页面末尾的按钮进行汇总。这里有一个链接，指向它现在的样子：https://i.stack.imgur.com/MI4pt.png
.prettyButton:focus {
background-color:#3C8EB7;
}
.prettyButton {
font-size: 36px;
width: 128px;
height: 56px;
border: 5px solid #3C8EB7;
border-radius: 5px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script>angular.module('demo', []);</script>
<link rel="stylesheet" type="text/css" href="button_css.css">
<script src="button_js.js"></script>
</head>
<body>
<div ng-app="demo">
<div class= "list_contain_q">
<div class="queution_1">
<div class="q1" style="color: black; font-size: 50px"> TOPIC </div>
<button class="prettyButton" ng-click="i = 1" ng-init="button1 = 'SPORT'">{{ button1 }}</button>
<button class="prettyButton" ng-click="i = 3" ng-init="button3 = 'history'">{{ button3 }}</button>
<button class="prettyButton" ng-click="i = 4" ng-init="button4 = 'music'">{{ button4 }}</button>
<br></br>
</div>
<div class="queution_2">
<div class="q2" style="color: black; font-size: 50px"> day </div>
<button class="prettyButton" ng-click="j = 12" ng-init="button12 = 'monday'">{{ button12 }}</button>
<button class="prettyButton" ng-click="j = 22" ng-init="button22 = 'sunday'">{{ button22 }}</button>
<button class="prettyButton" ng-click="j = 32" ng-init="button32 = 'friday'">{{ button32 }}</button>
<br></br>
</div>
<div class="queution_3">
<div class="q3" style="color: black; font-size: 50px"> houer </div>
<button class ="prettyButton" ng-click="k = 123" ng-init="button123 = '16:00'">{{ button123 }}</button>
<button class="prettyButton" ng-click="k = 223" ng-init="button223 = '17:00'">{{ button223 }}</button>
<button class="prettyButton" ng-click="k = 323" ng-init="button323 = '18:00'">{{ button323 }}</button>
<button class="prettyButton" ng-click="k = 423" ng-init="button423 = '19:00'">{{ button423 }}</button>
<button class="prettyButton" ng-click="k = 523" ng-init="button523 = '20:00'">{{ button523 }}</button>
<br></br>
<br></br>
</div>
</div>
<h2>summary</h2>
<p class="sumamry" id = "sumamry_id" style="color: black; font-size: 40px; text-align: right;"> topic<input type="text" id = "topicbtn" value="this['button' + i]" ng-model="this['button' + i]" placeholder="topic"vstyle="color: black; font-size: 40px"> in day<input type="text" id="DayBtn" value="this['button' + j]" ng-model="this['button' + j]" placeholder="in day" style="color: black; font-size: 40px"> in hour <input type="text" id = "hourbtn" value="this['button' + k]" ng-model="this['button' + k]" placeholder="time"></p>
</body>
</html>回答 1
Stack Overflow用户
发布于 2020-06-13 05:30:06
若要更改选定按钮的颜色，请使用element.style.color。下面是一个例子：
var btn = document.getElementById('colorChangeButton'); // Gets the button
var clr = document.getElementById('clr'); // Gets the color
btn.addEventListener('click', (e) => { // When the button is clicked...
btn.style.color = clr.value; // Set the button's color to the value of the color picker
});<button id="colorChangeButton">Change my color!</button>
<input type=color id="clr">
这是一个简单的示例，允许您将按钮的颜色更改为颜色选择器的值。它使用clr.value获取颜色值，并使用btn.style.color = clr.value设置新颜色。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62352681
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号