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:
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:
So to remove our post class, what would we do?
Then to add it back, as well as it's styles, we could say:
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')