单击之后，如何更改按钮的背景颜色？

发布于 2025-02-04 16:31:33 字数 571 浏览 4 评论 0 原文

我需要使用以下代码将按钮的背景颜色从深色更改为

<button class="btn btn-dark" id="btn" th:attr="onclick=|vote('${listAnswer.answer_id}','+1')|"><i class="fa fa-star fa-2x" ></i>UpVote</button>

绿色。它不起作用。请帮我

function vote(answerId,rateValue){

         alert(rateValue);

         axios.post('/saveRatings?answerId=' + answerId + '&rateValue=' + rateValue, {


         })
         .then(function(response){


      document.getElementById("btn").style.background-color='green';

         })

         }

原文

I need to change the background color of the button from dark to green

<button class="btn btn-dark" id="btn" th:attr="onclick=|vote('${listAnswer.answer_id}','+1')|"><i class="fa fa-star fa-2x" ></i>UpVote</button>

I tried to changed the button's background color from dark to green using following code. It does not work. Please help me

function vote(answerId,rateValue){

         alert(rateValue);

         axios.post('/saveRatings?answerId=' + answerId + '&rateValue=' + rateValue, {


         })
         .then(function(response){


      document.getElementById("btn").style.background-color='green';

         })

         }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

云归处 2025-02-11 16:31:33

JavaScript属性名称不能包含 - 字符，因为这是操作员。

因此，必须使用

而不是：

document.getElementById("btn").style.background-color = 'green';

使用此：

document.getElementById("btn").style.backgroundColor = 'green';

JavaScript property names cannot contain the - character because this is an operator.

Due to this, CSS properties must be accessed with camelCase syntax.

Instead of :

document.getElementById("btn").style.background-color = 'green';

Use this :

document.getElementById("btn").style.backgroundColor = 'green';

回复收藏 0 原文

焚却相思 2025-02-11 16:31:33

您可以尝试使用

<button class="btn btn-dark" id="btn" th:attr="onclick=|vote('${listAnswer.answer_id}','+1')|"><i class="fa fa-star fa-2x" ></i>UpVote</button>

const btn = document.getElementById('btn');

btn.addEventListener('click', function onClick() {
  btn.style.backgroundColor = 'green';
  btn.style.color = '(Color whatever you want)';
});

You can try this way

<button class="btn btn-dark" id="btn" th:attr="onclick=|vote('${listAnswer.answer_id}','+1')|"><i class="fa fa-star fa-2x" ></i>UpVote</button>

const btn = document.getElementById('btn');

btn.addEventListener('click', function onClick() {
  btn.style.backgroundColor = 'green';
  btn.style.color = '(Color whatever you want)';
});

回复收藏 0 原文

前事休说 2025-02-11 16:31:33

单击按钮后，状态将变为“活动”，您可以使用CSS将按钮的颜色更改为您想要的任何内容。您需要做的就是使用“：Active”选择器添加CSS规则。
https：//www.w3schools.com/csssssref/csssref/cssref/sel_active.asp

基本上：

button:active { color: green; }

After you have clicked a button it's state becomes "active" and you can use css to change the color of the button to whatever you want. All you need to do is add a css rule using the ":active" selector.
https://www.w3schools.com/cssref/sel_active.asp
https://www.freecodecamp.org/news/css-button-style-hover-color-and-background/
Basically: