Home >>Javascript Programs >Dynamically add CSS class with JavaScript
Dynamically add CSS class with JavaScript
Dynamically add CSS class with JavaScript
All you know, JavaScript was built to provide interactions. This article is useful to add interactive dynamically functionality.
In this tutorial, we will provide you how to apply CSS dynamically in JavaScript. JavaScript provides you to add CSS and change the look of webpage.
This includes effects such as text change, background color change, text-color change, etc. on click on a button. And also it provides you to display something on click on a button. All these effects works when adding JavaScript layer over the CSS.
You have also using the in-built method, add() and remove() to add or remove classes in JavaScript code.
In this example, we will see how to hide or show text by adding the class in JavaScript. Here, we have a button which have onclick attribute and paragraph tag with id-text. first, we hide the text and when we click on the button it displays the hidden text. let’s see how to code.
Let's take an example:
<!DOCTYPE html>
<html>
<head>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<button onclick='addClass()'> Click me to show text </button>
<p id="text" class="text hidden">This is Phptpoint Tutorial</p>
<script>
function addClass() {
var text = document.getElementById('text');
text.classList.remove('hidden');
text.classList.add('show');
}
</script>
</body>
</html>