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

Question

Whenever I click on the left arrow icon, I want the style of the menu to change. Is it possible to bind specific css style when using onclick function?

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

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

How I want it to look after onclick function.

#sidebar-container .menu
  width: 10rem
  

Answer 1

Make a class containing the styles you want and you can toggle those on and off using javascript:

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

This will add the my-class class if the element doesnt have it, and remove the my-class class if the element does have it. You may also use classList.add and classList.remove if you'd like to set it on or off.

You can easily bind this to a button with inline javascript. It is recomended to use event listeners but this should do the trick:

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

You can change my-elemment to be the ID of the element you want to toggle the class for and my-class to the classname you'd like to use.

Answer 2

It is possible to bind to an element. You can use document.querySelector() to find that element.

for example:

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

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

It's almost always easier to just add an overriding class instead of editing single style properties:

el.classList.add("override");

and have that class in css somewhere.

.override {
    transition: none !important;
}

Answer 3

You can create a secondary class for styles you want when it is clicked. You can toggle the class like this

 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>

Hope it helps. Cheers!