如何更改w3.css按钮自己的颜色？

Question

  <link type="text/css" href=" https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"> <div class="w3-bar w3-red"> <a class="w3-bar-item w3-button w3-hover-blue">Button</a> </div> 

I want to make that if you click on it, it changes its own color. And if you click it again, it changes to the original color. (see the hover) I don't know how to do, because it's a class, and the color is in the bar.

Answer 1

You can try this:

 var IsCustomBG=false; $(".w3-button").click(function(){ if(IsCustomBG==false){ $(this).css("background-color","red"); IsCustomBG=true; } else{ $(this).css("background-color",""); IsCustomBG=false; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link type="text/css" href=" https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"> <div class="w3-bar w3-red"> <a class="w3-bar-item w3-button w3-hover-blue">Button</a> </div> 

Answer 2

You can add/remove class on click of button.

 $(".w3-bar-item").on("click",function(){ if($(this).hasClass('color')){ $(this).removeClass('color'); } else{ $(this).addClass('color'); } }); 

 .color{ color:green !important; background-color:yellow !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link type="text/css" href=" https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"> <div class="w3-bar w3-red"> <a class="w3-bar-item w3-button w3-hover-blue">Button</a> </div> 

Answer 3

You can simply create a class and toggle the class on click. This approach is useful when you want to add some other css properties in future for same operation.

 $(".w3-button").click(function(){ $(this).toggleClass('redCls'); }); 

 .redCls{ background-color:red !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link type="text/css" href=" https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"> <div class="w3-bar w3-red"> <a class="w3-bar-item w3-button w3-hover-blue">Button</a> </div> 

Answer 4

Do this, add an ID to the link, best would be to not use CSS frameworks like these at all.

var theLink = document.querySelector("#fkbtn");
theLink.addEventListener("click", function() {

this.className = ('clicked'); });

In the Css, you need this:

.clicked{ background:black; !important;}

With frameworks, things get messy, you need the !important to override stuff, just a huge mess, the above removes all other classes and thus, the dimensions, but your link color will change.

Answer 5

 #check{ display: none; } label[for=check]{ padding: 5px 10px; background-color: skyblue; cursor: pointer; color: white; } #check:checked + label{ background-color: pink; } 

 <input type="checkbox" id="check" /> <label for="check">button</label> 

If you want to change button's color when you click, I think you should use checkbox trick. but it's not correct answer. It's just trick.

Answer 6

Store the original value of the "button" and toggle between that and a custom color on click.

 var button = document.getElementsByTagName('a')[0]; var color = button.style.backgroundColor; button.addEventListener('click', function(){ this.style.backgroundColor = this.style.backgroundColor === color ? '#BADA55' : color; }); 

 <link type="text/css" href=" https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"> <div class="w3-bar w3-red"> <a class="w3-bar-item w3-button w3-hover-blue">Button</a> </div>