我有一個 html 按鈕，位于屏幕的中間左側(cè)，該按鈕的樣式如下： .openbtn { font-size: 20px; border-radius: 0 5px 5px 0; cursor: pointer; position: fixed; Top: 50%; left: 0px; background-color: #181A1B; color: white; padding: 10px 15px; border: none; z-index: 1; transition: 0.5s; }現(xiàn)在，當(dāng)我單擊此按鈕時，我希望它轉(zhuǎn)移到右上角，當(dāng)我再次單擊時，它應(yīng)該返回到其原始位置。在 Javascript 中，按鈕的處理方式如下： var lastState = false; function sideButtonClicked() { if(!lastState){ //open lastState=true document.getElementById("Button").style.left = ""; document.getElementById("Button").style.right = "0"; document.getElementById("Button").style.top = "0"; } else{ //close lastState=false document.getElementById("Button").style.left = "0px"; document.getElementById("Button").style.right = ""; document.getElementById("Button").style.top = "50%"; }我發(fā)現(xiàn)這個欺騙是因?yàn)槿绻蚁氩シ庞疑辖堑陌粹o，那么當(dāng)我在 css 上聲明它時，我不會放置 left 屬性，但由于它的初始位置位于左側(cè)，所以我必須聲明它。我嘗試將其設(shè)置為“”，但不起作用。我知道有效的是按鈕在單擊按鈕時向上/向下移動，}
1 回答
HUWWW
TA貢獻(xiàn)1874條經(jīng)驗(yàn) 獲得超12個贊
這是如何在 vanilla JS 中切換類的簡單示例。然后，您只需通過 CSS 進(jìn)行樣式設(shè)置即可。
// Cache the DOM element for continued use
var btn = document.getElementById("btn");
// Attach event listener to button for 'click' event
btn.addEventListener("click", () =>
{
// Where we see if it has the class or not
// Is it inactive?
if (!btn.classList.contains("active"))
{
console.log("Added");
btn.classList.add("active");
} else // If it *is* currently active
{
console.log("Removed");
btn.classList.remove("active");
}
});
.btn {
padding: 1rem;
width: 200px;
transition: all 300ms ease-in-out;
}
.btn.active {
padding: 2rem;
width: 400px;
}
<button class="btn" id="btn">Click Me</button>
本質(zhì)上，您使用 CSS 類作為不同樣式的目標(biāo)，并僅使用 JS 來打開/關(guān)閉該類。這樣，您只需將 CSS 中的“toggle”類編輯為您想要的任何內(nèi)容，并且代碼將始終有效。這通常是我們用于粘性導(dǎo)航欄等的方法。您只需添加/刪除另一個類，它就會覆蓋默認(rèn)樣式。
- 1 回答
- 0 關(guān)注
- 176 瀏覽
添加回答
舉報
0/150
提交
取消