Change Style Sheet Using Tutorial CSS Swap Stylesheet
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>