如何使用 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>

希望能帮助到你。 干杯!