Changing CSS
Toggle a CSS class when the visual state changes. Keep the styling rule in CSS rather than repeating it in event code.
Where to run this
This example changes a document. Open it in the HTML playground, then select Run code. It runs inside a separate preview.
A practical example
<style>.highlight { background: #fff1c4; padding: 16px; }</style>
<p id="notice">Repair club this Saturday</p>
<button id="toggle" type="button">Highlight</button>
<script>
document.getElementById("toggle").addEventListener("click", () => {
document.getElementById("notice").classList.toggle("highlight");
});
</script>
What happens
Each click toggles the paragraph highlight.