Adding and Removing CSS Class with JavaScript on Page Load
Explore our JavaScript category, where you’ll find loads of helpful articles and tutorials for everyone, whether you’re just starting out or a pro developer. Learn about different JavaScript functions that can be used in various projects according to their specific requirements.
This code uses the DOMContentLoaded event and window.onload event to add and then remove a class from an element after a certain delay.
document.addEventListener(‘DOMContentLoaded’, function() {
window.onload = function() {
var myElement = document.getElementById(‘content’);
myElement.classList.add(‘myClass’);
setTimeout(function() {
myElement.classList.remove(‘myClass’);
}, 1000);
};
});
window.onload = function() {
var myElement = document.getElementById(‘content’);
myElement.classList.add(‘myClass’);
setTimeout(function() {
myElement.classList.remove(‘myClass’);
}, 1000);
};
});