Change Style Sheet Using Tutorial CSS Swap Stylesheet
Published : November 17, 2014Last Edited : November 24, 2025
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>