I was wondering if you can activate some CSS through an HTML button press or scrolling to a certain point. It's preferred if it's through JS.

CodePudding user response：

You can use a wrapper class:

const button = document.querySelector("button")
button.addEventListener("click", () => {
  document.body.classList.add("red")
})

.red {
  color: red;
}

<h1>Stackoverflow is nice!</h1>
<p>Great website!</p>
<button>Change CSS</button>

• Create a button which listens for a user action.
• When the button is clicked add a class to the body element.
• Use this class to apply different css rules.

You can build a dark theme with that for example.

CodePudding user response：

As previously said by @Lain, it is indeed possible. something like someElement.classList.add() or someElement.classlist.toggle() MDN Web API