I'm interested in creating a button that can switch between two stylesheets with a single click. Here is the current code I am using:
<link id="style1" rel="stylesheet" type="text/css" href="style.css" />
<link id="style2" rel="stylesheet" type="text/css" href="styleinvert.css" disabled="disabled" />
<script>
function toggle() {
var el1 = document.getElementById("style1"),
el2 = document.getElementById("style2");
if( el1.disabled == "disabled" ) {
el1.disabled = undefined;
el2.disabled = "disabled";
} else {
el1.disabled = "disabled";
el2.disabled = undefined;
}
}
</script>
<a href="#" onclick="toggle()">Invert</a>
However, when I use this code, there is a brief moment where the stylesheet disappears between deactivating the first one and activating the new one.
Is there a more efficient way to achieve this? Ideally, I would like to simply add a small snippet of style for the second stylesheet, as I only need to make a few changes such as font color, etc.