FULL STACK   ·   UI   ·   UX   ·   GRAPHICS   ·   DEVELOPER   ·   INSTRUCTOR

Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Change Style Sheet Using Tutorial CSS Swap Stylesheet

Published :
Author :
Adam Khoury
Learn to change the entire style of your web page without requiring reload using JavaScript that is targeting the href attribute of your familiar link element using the setAttribute method of JavaScript. To make the style sheet choice stick for a user you can apply either cookies or sessions in PHP or JavaScript. <!DOCTYPE html> <html> <head> <link id="pagestyle" rel="stylesheet" type="text/css" href="default.css"> <script> function swapStyleSheet(sheet){ document.getElementById('pagestyle').setAttribute('href', sheet); } </script> </head> <body> <h2>Javascript Change StyleSheet Without Page Reload</h2> <button onclick="swapStyleSheet('dark.css')">Dark Style Sheet</button> <button onclick="swapStyleSheet('blue.css')">Blue Style Sheet</button> <button onclick="swapStyleSheet('default.css')">Default Style Sheet</button> </body> </html>