我有一個 html 按鈕，位于屏幕的中間左側，該按鈕的樣式如下： .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; }現在，當我單擊此按鈕時，我希望它轉移到右上角，當我再次單擊時，它應該返回到其原始位置。在 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%"; }我發現這個欺騙是因為如果我想播放右上角的按鈕，那么當我在 css 上聲明它時，我不會放置 left 屬性，但由于它的初始位置位于左側，所以我必須聲明它。我嘗試將其設置為“”，但不起作用。我知道有效的是按鈕在單擊按鈕時向上/向下移動，}
1 回答
HUWWW
TA貢獻1874條經驗 獲得超12個贊
這是如何在 vanilla JS 中切換類的簡單示例。然后，您只需通過 CSS 進行樣式設置即可。
// 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>
本質上，您使用 CSS 類作為不同樣式的目標，并僅使用 JS 來打開/關閉該類。這樣，您只需將 CSS 中的“toggle”類編輯為您想要的任何內容，并且代碼將始終有效。這通常是我們用于粘性導航欄等的方法。您只需添加/刪除另一個類，它就會覆蓋默認樣式。
- 1 回答
- 0 關注
- 152 瀏覽
添加回答
舉報
0/150
提交
取消