Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>setAttribute and getAttribute</title> </head> <body> <div id="container" class="initial-class">Container content</div> <button id="change-attribute">Change Attribute</button> <button id="get-attribute">Get Attribute</button> <script> const container = document.getElementById('container'); const changeAttributeButton = document.getElementById('change-attribute'); const getAttributeButton = document.getElementById('get-attribute'); changeAttributeButton.addEventListener('click', () => { container.setAttribute('class', 'new-class'); alert('Class attribute changed to "new-class"'); }); getAttributeButton.addEventListener('click', () => { const className = container.getAttribute('class'); alert(`Current class attribute: ${className}`); }); </script> </body> </html>