Class

Introduction

JavaScript not just allows you to modify HTML content, but also change class of an element.

<style>
.mystyle {
	color: red;
}
</style>
<p id="myP">This is a paragraph.</p>
<button id="myBtn">Click me</button>

<script>
document.getElementById("myBtn").addEventListener("click", function() {
	document.getElementById("myP").className = "mystyle";
});
</script>

The paragraph has an id of "myP" but no class when the page is loaded.

When the button is clicked, the class of the paragraph is changed to "mystyle".

So the text color defined in the class "mystyle" is applied to the paragraph.