如何更改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按鈕的顏色？

回答

相關問題