如何使用Javascript将样式绑定到onclick元素

Question

每当我单击左箭头图标时，我都希望菜单的样式发生变化。使用onclick函数时，是否可以绑定特定的css样式？

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

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

我希望它在onclick函数之后看起来如何。

#sidebar-container .menu
width: 10rem

Answer 1

创建一个包含所需样式的类，您可以使用javascript:打开和关闭这些样式

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

如果元素没有my-class类，这将添加它；如果元素有my-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更改为要切换类的元素的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 = "";
}); 

只添加一个重写类而不是编辑单一样式的属性几乎总是更容易：

el.classList.add("override");

并将该类放在css中。

.override {
transition: none !important;
}

Answer 3

单击时，您可以为所需的样式创建一个辅助类。你可以像这个一样切换类

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>

希望能有所帮助。干杯