已解決430363個問題，去搜搜看，總會有你想問的

無法通過javascript CSS重置按鈕顏色

首頁猿問無法通過javascript...

無法通過javascript CSS重置按鈕顏色

JavaScript

溫溫醬 2023-03-03 15:38:36

我可以使用 CSS backgroundImage 線性漸變在 javascript 中更改按鈕的顏色，這可行，但當我使用相同的技術嘗試重置回原始狀態時它不起作用。我錯過了什么？var darkened=false;function toggle() { if (darkened) { console.log("lightening button"); document.getElementById("scrollbutton").style.backgroundImage = "linear-gradient(rgb(222, 222, 222), rgb(255, 255, 255));"; } else { console.log("darkening button"); document.getElementById("scrollbutton").style.backgroundImage = "linear-gradient(rgb(99, 99, 99), rgb(166, 166, 166))"; } darkened = ! darkened;}<html><body><button style="background-image: linear-gradient(rgb(222, 222, 222),rgb(255, 255, 255));" id="scrollbutton" onclick="toggle();"> pressme</button></body></html>

查看完整描述

2 回答

德瑪西亞99

TA貢獻1770條經驗獲得超3個贊

您不必在執行 css 函數（例如 linear-gradient）后放置分號

因為，javascript 假定它是其語句的分號，并在那里結束代碼

var darkened=false;

function toggle() {

if (darkened) {

console.log("lightening button");

document.getElementById("scrollbutton").style.backgroundImage = "linear-gradient(rgb(222, 222, 222), rgb(255, 255, 255))";

} else {

console.log("darkening button");

document.getElementById("scrollbutton").style.backgroundImage = "linear-gradient(rgb(99, 99, 99), rgb(166, 166, 166))";

}

darkened = ! darkened;

}

<html>

<body>

<button style="background-image: linear-gradient(rgb(222, 222, 222),rgb(255, 255, 255));" id="scrollbutton" onclick="toggle();"> pressme</button>

</body></html>

反對回復 2023-03-03

繁星淼淼

TA貢獻1775條經驗獲得超11個贊

您可能不需要定義變量并更改內聯樣式。您可以使用classList.toggle和分離樣式并將它們添加到新類中

function toggle() {

document.getElementById("scrollbutton").classList.toggle('darkening');

}

.lightening {

background-image: linear-gradient(rgb(222, 222, 222), rgb(255, 255, 255));

}

.darkening {

background-image: linear-gradient(rgb(99, 99, 99), rgb(166, 166, 166))

}

<button class="lightening" id="scrollbutton" onclick="toggle();"> pressme</button>

反對回復 2023-03-03

2 回答
0 關注
119 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

無法通過javascript CSS重置按鈕顏色

無法通過javascript CSS重置按鈕顏色

2 回答

添加回答