Change a Page's Stylesheet Using Javascript
Change a Page's Stylesheet Using Javascript. This function adds a stylesheet to the page, and replaces any duplicate style with new, leaving non-duplicated styles.
Javascript:
// Javascript function for adding a stylesheet
// Pass the url of the stylesheet to the function
function loadCSS(src) {
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = src;
head.appendChild(link);
}
HTML Links:
// Javascript function for adding a stylesheet
// Link to the function or call the function programatically.
<p><a href="javascript:{src='../css2.css'; loadCSS(src)}">Load new CSS</a></p>
<p><a href="javascript:{src='../css.css'; loadCSS(src)}">Load original CSS</a></p>
// Here is an example of the working code