Changing CSS styles with JS

To be able to read an elements styles, we can get an element, say the first post, can say:

const post = document.querySelector(".post");
post.style;

And then we can change virtually any CSS property we like. We can set the display to maybe flex or none to hide the post:

post.style.display = "none";

We can change it's background with the background property. Maybe use the color orange:

post.style.background = "orange";

Basically you can modify each style in any way you can think of, but make sure that it is set to a simple string, other wise it won't work. This even applies to numbers, such as when you are setting padding or margin;

Now what about working with classes? Generally you're going to be working with classes and modifying them. So to be able to read a single class, what an elements class is, you can use the className property.

So we can get the post's className with post.className:

console.log(post.className);

And we get the string post, like what is on the element itself. Then if you want to manage the classes, to add or remove a class, we use a new reference:

post.classList;

So to remove our post class, what would we do?

post.classList.remove("post");

Then to add it back, as well as it's styles, we could say:

post.classList.add("post");

And note that add can be used to add multiple properties, one after the other.

But an easier way to do this if you want to add then remove a class is to say classList.toggle('post')