JavaScript toggle class
<!DOCTYPE html>
<html>
<head>
<style>
.class1{color:red;}
.class2{color:green;}
</style>
</head>
<body>
<button id="toggleClass">Toggle Class</button>
<h1 class="class1">Click the Toggle Calss button to class of this element</h1>
<script>
const showMenu = document.querySelector('#toggleClass');
showMenu.addEventListener('click', e => {
document.querySelector('.class1').classList.toggle('class2')
})
</script>
</body>
</html>
18 Related pages
- Date and Time JavaScript
- Display Date, JavaScripts
- Display Date, JS
- External JavaScripts in HTML head
- JavaScript confirm OK and Cancel
- JavaScript Promise API
- JavaScript redirect to
- JavaScript toggle class
- JS alert in php
- JS Blinking Text
- JS Date
- JS display image preview on the form before submit
- JS image inside ul li
- JS Numeric Sort
- JS prevent form resubmission
- JS, pop( ) remove last element in the array
- JS, push() adds to the last element in the array
- Timeout JS