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

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

我想打，如果你点击它，它改变自己的颜色。如果再次单击它，它会更改为原始颜色。（见悬停）我不知道该怎么做，因为这是一堂课，颜色在酒吧。

来源

2017-08-11 jhsznrbt

addClass与removeClass jQuery中......与颜色创建类，只是改变它的onClick（） –

你加一类！对每个属性重要和必要时删除。 – user5014677

我可以从ID中选择我的按钮吗？ – jhsznrbt

你可以试试这个：

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>

来源

2017-08-11 12:06:04

可能只是使用（！IsCustomBG），而且，布尔变量太复杂（命名） –

是的，我们可以使用它，这只是例如。 –

谢谢，这工作！ – jhsznrbt

您可以添加/删除按钮的点击类。

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

来源

2017-08-11 12:07:42

做到这一点，一个ID添加到链接，最好是不要使用CSS框架，像这些的。

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

this.className =（'clicked'）; }）;

在CSS，你需要这样的：

.clicked{ background:black; !important;}

有了框架，事情变得一团糟，你需要的重要覆盖的东西，只是一个巨大的混乱，上述删除所有其他类，因此，对！尺寸，但你的链接颜色会改变。

来源

2017-08-11 12:08:18 ptts

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

如果要更改按钮的颜色，当你点击，我认为你应该使用复选框伎俩。但这不是正确的答案。这只是诀窍。

来源

2017-08-11 12:09:04 zynkn

存储“按钮”的原始值，并在点击时在该值和自定义颜色之间切换。

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>

来源

2017-08-11 12:09:18

这不像使用班级那样易于管理。这只是一个简单的非jQuery示例的说明。 –

您可以简单地创建一个类，并切换上点击类。这种方法在将来为相同操作添加其他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>

来源

2017-08-11 12:11:36

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

回答

相关问题