javascript - <button> change color when clicked in HTML? - Stack Overflow

admin管理员组

文章数量:1245658

How do I make a button change to another color when clicked and when clicked again it goes back to its original color? Can I do by using CSS or do I have to use Javascript?

Thanks in advance

This is the HTML code of my buttons.

<div class="H1toH5">
  <button class="seatButton">H1</button>
  <button class="seatButton">H2</button>
  <button class="seatButton">H3</button>
  <button class="seatButton">H4</button>
  <button class="seatButton">H5</button>
</div>

How do I make a button change to another color when clicked and when clicked again it goes back to its original color? Can I do by using CSS or do I have to use Javascript?

Thanks in advance

This is the HTML code of my buttons.

<div class="H1toH5">
  <button class="seatButton">H1</button>
  <button class="seatButton">H2</button>
  <button class="seatButton">H3</button>
  <button class="seatButton">H4</button>
  <button class="seatButton">H5</button>
</div>

• javascript
• html
• css
• button
• colors

Share Improve this question Follow edited May 25, 2015 at 4:36 user764357 asked May 25, 2015 at 2:41 totallynotgroottotallynotgroot 6922 gold badges44 silver badges1313 bronze badges 0

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

Pure CSS

1. Change your button to another element (like span)
2. Use a label and checkbox to control the toggle status
3. Use :checked CSS selector and + sibling selector

.H1toH5 input { display: none; }
.H1toH5 .seatButton { padding: 5px; border: 1px solid #ccc; background: yellow; }
.H1toH5 input:checked + .seatButton { background: red; }

<div class="H1toH5">
  <label>
    <input type="checkbox" />
    <span class="seatButton">H1</span>
  </label>
  <label>
    <input type="checkbox" />
    <span class="seatButton">H1</span>
  </label>
  <label>
    <input type="checkbox" />
    <span class="seatButton">H1</span>
  </label>
  <label>
    <input type="checkbox" />
    <span class="seatButton">H1</span>
  </label>
  <label>
    <input type="checkbox" />
    <span class="seatButton">H1</span>
  </label>
</div>

How do I make a button change to another color when clicked and when clicked again it goes back to its original color? Can I do by using CSS

Try utilizing css :focus pseudo class , background-color

button {
  background-color:yellow;
}

button:focus {
  background-color:orange;
}

<div class="H1toH5">
  <button class="seatButton">H1</button>
  <button class="seatButton">H2</button>
  <button class="seatButton">H3</button>
  <button class="seatButton">H4</button>
  <button class="seatButton">H5</button>
</div>

---

no just the one that is clicked, but i want to be able to click on many buttons not just one

var elems = document.getElementsByClassName("seatButton");
for (var i = 0; i < elems.length; i++) {
  elems[i].onclick = function() {
    var color = window.getComputedStyle(this, null)
                .getPropertyValue("background-color");
    this.style.backgroundColor = color === "rgb(255, 255, 0)" 
                                 ? "rgb(255, 165, 0)" : "rgb(255, 255, 0)";
  };
};

button {
  background-color:yellow;
}

<div class="H1toH5">
  <button class="seatButton">H1</button>
  <button class="seatButton">H2</button>
  <button class="seatButton">H3</button>
  <button class="seatButton">H4</button>
  <button class="seatButton">H5</button>
</div>

You can do this with css a ::before pseudo element and the html checkbox input tag

input.toggle-btn {
    visibility: hidden;
}
input.toggle-btn::before {
    content: attr(value);
    display: inline-block;
    padding: 5px;
    background: #fff;
    font-size: 14pt;
    color: #aaa;
    border-radius: 5px;
    border: 1px solid #aaa;
    visibility: visible;
}
input.toggle-btn:checked::before {
    background: rgb(50,150,250);
    color: #eee;
    border-color: #eee;
}

<input class="toggle-btn" type="checkbox" value="Hello">

This code will toggle a specific class when you click on it. If you click on the button again it will then return to it's original state.

    $('.seatButton').click(function () { 
       $(this).toggleClass('activeClass');
    }); 

Or just use the CSS Pseudo selected as people have specified above. There are many ways to achieve what you want!

No. You need to add/remove a class with javascript. To make @tpie feel better about himself, here is the code for that. Using jQuery:

$('.seatButton').on('click', function(){
    $(this).toggleClass('is-active');
});

本文标签： javascriptltbuttongt change color when clicked in HTMLStack Overflow