如何更改按钮onclick的颜色和名称

Question

.enc-btn {
  background-color: #02bc15;
  border: none;
  border-radius: .5rem;
  font-size: 12px;
  color: white;
}

<label>Encounter Status:</label>
<button class="btn px-3 py-1 enc-btn">Opened</button>

我想把按钮改成 #ff3030 单击时。

所以我想更改按钮的颜色，使其在单击后更改为按钮 css 下的颜色。我需要一个比 :focus 更持久的解决方案而且我还想把“打开”改成“关闭”。

Answer 1

使用 :focus psuedo-class.

.enc-btn {
  background-color: #02bc15;
  border: none;
  border-radius: .5rem;
  font-size: 12px;
  color: white;
}

button.enc-btn:focus {
  background-color: #ff3030;
  border: none;
  border-radius: .5rem;
  font-size: 12px;
  color: white;
}

<label>Encounter Status:</label>
<button class="btn px-3 py-1 enc-btn">Opened</button>

编辑~用js解决。

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

btn.innerHTML = 'Opened';

// Change button text on click
btn.addEventListener('click', function handleClick() {
  const initialText = 'Opened';

  btn.innerHTML = `Closed`;
});

// change color 
btn.addEventListener('click', function onClick() {
  btn.style.backgroundColor = '#ff3030';
  btn.style.color = 'white';
});

.enc-btn {
  background-color: #02bc15;
  border: none;
  border-radius: .5rem;
  font-size: 12px;
  color: white;
}

<label>Encounter Status:</label>
<button class="btn px-3 py-1 enc-btn" id="btn"></button>

Answer 2

这可以使用 DOM 来实现。

JavaScript 代码示例：

function btnclick(event) {
  event.target.textContent = !event.target.classList.contains('opened') ? 'Closed' : 'Opened'
  event.target.classList.toggle('opened')
}

// Adding individual listeners is inefficient, this would more correctly be done with event delegation
document.addEventListener('DOMContentLoaded', function() {
  for(let button of document.getElementsByClassName('enc-btn'))
    button.addEventListener('click', btnclick);
})

.enc-btn {
  background-color: #02bc15;
  border: none;
  border-radius: .5rem;
  font-size: 12px;
  color: white;
}

.opened {
  background-color: #ff3030
}

<label>Encounter Status:</label>
<button class="btn px-3 py-1 enc-btn">Opened</button>
<button class="btn px-3 py-1 enc-btn">Opened</button>

const button = document.querySelector('.btn');
button.addEventListener('click', btnclick); 
function btnclick() {
  button.style.backgroundColor = '#ff3030';
}

Answer 3

有几个简单的方法可以使用 jQuery addClass 函数或 css 函数：

$(document).ready(function(){
  $(".enc-btn").click(function(){
     $(".enc-btn").css("color", "#ff3030");
     $(".enc-btn").addClass("new-color");
  });
});

.enc-btn {
  background-color: #02bc15;
  border: none;
  border-radius: .5rem;
  font-size: 12px;
  color: white;
}

.new-color {
  color: #ff3030;
}

我已经把它扔进了 fiddle 你可以在这里看到：https://jsfiddle.net/BrianChenoweth/ch6v8og7/8/

Answer 4

你可以在JavaScript

中使用这个方法

const btn = document.querySelector("#myBtn");

myBtn.addEventListener("click" , () => {
  
  btn.style.backgroundColor = '#ff3030';

})

.enc-btn {
  background-color: #02bc15;
  border: none;
  border-radius: .5rem;
  font-size: 12px;
  color: white;
}

<label>Encounter Status:</label>
<button id="myBtn" class="btn px-3 py-1 enc-btn">Opened</button>

如何更改按钮onclick的颜色和名称

how to change color and name of button onclick

html

javascript

css

frontend