[英]JavaScript Button Style change on click
我已經將這段 JavaScript 放在一起,但由於我是新手,我正在努力處理代碼。 我想要做的是當一個按鈕被點擊時,它會改變背景顏色的不透明度。 下面的代碼執行此操作,但現在我希望再次單擊該按鈕時將其恢復為正常狀態。
我怎樣才能做到這一點? 謝謝..
正常狀態:background="rgba(255,0,0,0.8)"; 按下狀態:background="rgba(255,0,0,0.6)";
function highlight(id) {
document.getElementById(id).style.background="rgba(255,0,0,0.6)";
}
我會使用一個 CSS 類:
.opacityClicked{
background:rgba(255,0,0,0.8);
}
.opacityDefault{
background:rgba(255,0,0,0.6);
}
並將您的功能更改為:
function highlight(id) {
var element = document.getElementById(id);
element.class = (element.class == "opacityClicked") ? "opacityDefault" : "opacityClicked";
}
或者如果您只想使用 JavaScript
var isClicked = false;
function highlight(id) {
isClicked = !isClicked;
var element = document.getElementById(id);
element.style.background = (isClicked == true) ? "rgba(255,0,0,0.6)" : "rgba(255,0,0,0.8)";
}
更新(見評論:如果你使用 2 個按鈕):
var buttonClicked = null;
function highlight(id) {
if(buttonClicked != null)
{
buttonClicked.style.background = "rgba(255,0,0,0.8)";
}
buttonClicked = document.getElementById(id);
buttonClicked.style.background = "rgba(255,0,0,0.6)";
}
你可以像這樣快速地做一些事情:
首先,向您的頁面添加一個隱藏的輸入元素,如下所示:
<input type="button" id="foobar" value="FooBar!" onclick="highlight('foobar')" style="background-color:rgba(255,0,0,0.8);" />
<input type="hidden" id="one_neg_one" value="1" /> <= hidden element
接下來,把它放在你的高亮功能中:
function highlight(id) {
var a = 7;
var o = document.getElementById("one_neg_one");
var newa = (a + (parseInt(o.value) * -1)) * 0.1;
document.getElementById(id).style.background="rgba(255,0,0," + newa + ")";
o.value = o.value * -1;
}
這應該可行,盡管我同意之前的答案,您應該為此使用 css 類。
@Ruben-J 回答工作正常。 但是有一個語法錯誤 - 您應該使用element.className而不是 element.class。
https://developer.mozilla.org/en-US/docs/Web/API/Element/className
以下是使用正確語法的更新答案:
function highlight(id) {
var element = document.getElementById(id);
element.className = (element.className == "opacityClicked") ? "opacityDefault" : "opacityClicked";
}
還注意到這個答案沒有顯示 HTML。 確保通過 id 元素,而不是id的名稱。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.