- Published on
Vanilla JS: Classes
- Authors
- Name
- John Siwicki
- @siwicadilly
A few weeks ago, an article was making the rounds about how GitHub removed jQuery from its front end. I still think that jQuery is a great intro to writing small applications and dipping your toe into writing more complex code. I thought it would be fun to take apart some common jQuery usages and look at them.
Today, I wanted to do some class manipulation. A common thing that people still use jQuery for is to toggle or just add and remove a class.
Add Class
const button = document.querySelector(“.btn”);
el.classList.add(“active”);
Remove Class
const button = document.querySelector(“.btn”);
button.classList.remove(className);
Toggle Class
const button = document.querySelector(“.btn”);
button.classList.toggle(className);
As you can see from the above examples, these tasks are no longer extensive to do in plain JavaScript. When jQuery was first released, it was a revelation—the API consumed low level, and it really saved you a lot of work accomplishing what felt like simple tasks.