如何使用 Javascript 將樣式綁定到 onclick 元素？

Question

每當我單擊左箭頭圖標時，我都希望更改菜單的樣式。 使用 onclick function 時是否可以綁定特定的 css 樣式？

i.fas.fa-chevron-circle-left.left

#sidebar-container .menu
  width: 18rem
  transition: 200ms

我希望它如何照顧 onclick function。

#sidebar-container .menu
  width: 10rem
  

Answer 1

制作一個包含您想要的 styles 的 class，您可以使用 javascript 打開和關閉它們：

document.getElementById('my-element').classList.toggle('my-class');

如果元素沒有它，這將添加my-class class，如果元素有它，則刪除my-class class。 如果您想打開或關閉它，您也可以使用classList.add和classList.remove 。

您可以輕松地將其綁定到具有內聯 javascript 的按鈕。 建議使用事件偵聽器，但這應該可以解決問題：

<button onclick="document.getElementById('my-element').classList.toggle('my-class')">Click me to toggle the class</button>

您可以將my-elemment element 更改為要切換 class 的元素的 ID，並將my-class更改為您想要使用的類名。

Answer 2

可以綁定到元素。 您可以使用 document.querySelector() 來查找該元素。

例如：

const el = document.querySelector("i.fas.fa-chevron-circle-left.left")

el.addEventListener("click", function(){
  el.style.transition = "";
}); 

添加覆蓋 class 而不是編輯單一樣式屬性幾乎總是更容易：

el.classList.add("override");

並在 css 某處擁有 class 。

.override {
    transition: none !important;
}

Answer 3

您可以在單擊時為您想要的 styles 創建一個輔助 class。 您可以像這樣切換 class

 const menu = document.querySelector("#sidebar-container.menu"); menu.addEventListener('click', function () { // by adding class name menu.classList.toggle("menu-clicked"); });

 #sidebar-container { width: 200px; height: 100vh; background: #ccc; display: flex; padding-top: 20px; align-items: flex-start; justify-content: center; transition: all ease 200ms; } #sidebar-container.menu { background: #ddd; padding: 20px; display: block; width: 100%; cursor: pointer; } #sidebar-container.menu.menu-clicked { background: green; }

 <div id="sidebar-container"> <div class="menu"> Menu </div> </div>

希望能幫助到你。 干杯!