如何更改 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>

我想做的是，如果你点击它，它会改变自己的颜色。如果你再次点击它，它会变成原来的颜色。（看悬停）我不知道怎么做，因为它是一个class，颜色在栏中。

Answer 1

你可以试试这个：

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

您可以 add/remove class 单击按钮。

$(".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

这样做，向 link 添加一个 ID，最好根本不要使用 CSS 这样的框架。

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

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

在 Css 中，您需要这个：

.clicked{ background:black; !important;}

有了框架，事情变得一团糟，你需要 !important 来覆盖东西，只是一团糟，上面删除了所有其他类，因此，尺寸，但你的 link 颜色会改变。

Answer 4

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

存储 "button" 的原始值并在单击时在该值和自定义颜色之间切换。

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>

Answer 6

您只需创建一个 class 并在单击时切换 class。当您想在将来为同一操作添加一些其他 css 属性时，此方法很有用。

$(".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>

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

How to change w3.css button's own color?

html

javascript

jquery

w3.css