javascript - How to change w3.css button's own color? - Stack Overflow

admin管理员组

文章数量:1323035

 <link type="text/css" href=" .css" rel="stylesheet">
 <div class="w3-bar w3-red">
        <a class="w3-bar-item w3-button w3-hover-blue">Button</a>
 </div>

 <link type="text/css" href=" https://www.w3schools./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.

• javascript
• jquery
• html
• w3.css

Share Improve this question Follow asked Aug 11, 2017 at 12:00 jhsznrbtjhsznrbt 17311 gold badge22 silver badges1313 bronze badges 4

• 1 addClass and removeClass in jquery... Create your class with the color and just alter it onClick() – EugenSunic Commented Aug 11, 2017 at 12:05
• You add a class with !important on each property and you remove when needed. – user5014677 Commented Aug 11, 2017 at 12:06
• Can I select my button from ID? – jhsznrbt Commented Aug 11, 2017 at 12:19
• Yes you can, just need to give id to button and use it – Bharatsing Parmar Commented Aug 11, 2017 at 12:26

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link type="text/css" href=" https://www.w3schools./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>

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./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link type="text/css" href=" https://www.w3schools./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>

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link type="text/css" href=" https://www.w3schools./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>

#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.

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./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>

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.

本文标签： javascriptHow to change w3css button39s own colorStack Overflow