Menu
I have a page which has <link> in the header that loads the CSS named light.css. I also have a file named dark.css. I want a button to swap the style of the page all together (there are 40 selectors used in css file and some do not match in two files).
How can I remove reference to light.css with JS and remove all the styles that were applied and then load dark.css and apply all the styles from that? I can't simply reset all of the elements, since some of the styles are applied through different css files and some are dynamically generated by JS. Is there a simple, yet effective way to do that without reloading the page? Vanilla JS is preferable, however I will use jQuery for later processing anyways, so jQ is also fine.
381
The @import rule allows you to import a style sheet into another style sheet. The @import rule must be at the top of the document (but after any @charset declaration). The @import rule also supports media queries, so you can allow the import to be media-dependent.
In CSS, a replaced element is an element whose representation is outside the scope of CSS; they're external objects whose representation is independent of the CSS formatting model. Put in simpler terms, they're elements whose contents are not affected by the current document's styles.
JavaScript can change Css styles such as color, font size etc. of elements using some methods such as getElementById(), getElementByClassName() etc. In the following example font style and font size of the elements have changed using getElementById() method.
You can include all the stylesheets in the document and then activate/deactivate them as needed.
In my reading of the spec, you should be able to activate an alternate stylesheet by changing its disabled property from true to false, but only Firefox seems to do this correctly.
So I think you have a few options:
rel=alternate <link rel="stylesheet" href="main.css"> <link rel="stylesheet alternate" href="light.css" id="light" title="Light"> <link rel="stylesheet alternate" href="dark.css" id="dark" title="Dark"> <script> function enableStylesheet (node) { node.rel = 'stylesheet'; } function disableStylesheet (node) { node.rel = 'alternate stylesheet'; } </script> disabled <link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="light.css" id="light" class="alternate"> <link rel="stylesheet" href="dark.css" id="dark" class="alternate"> <script> function enableStylesheet (node) { node.disabled = false; } function disableStylesheet (node) { node.disabled = true; } document .querySelectorAll('link[rel=stylesheet].alternate') .forEach(disableStylesheet); </script> media=none <link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="light.css" media="none" id="light"> <link rel="stylesheet" href="dark.css" media="none" id="dark"> <script> function enableStylesheet (node) { node.media = ''; } function disableStylesheet (node) { node.media = 'none'; } </script> You can select a stylesheet node with getElementById, querySelector, etc.
(Avoid the nonstandard <link disabled>. Setting HTMLLinkElement#disabled is fine though.)
125
You can create a new link, and replace the old one with the new one. If you put it in a function, you can reuse it wherever it's needed.
The Javascript:
function changeCSS(cssFile, cssLinkIndex) { var oldlink = document.getElementsByTagName("link").item(cssLinkIndex); var newlink = document.createElement("link"); newlink.setAttribute("rel", "stylesheet"); newlink.setAttribute("type", "text/css"); newlink.setAttribute("href", cssFile); document.getElementsByTagName("head").item(cssLinkIndex).replaceChild(newlink, oldlink); } The HTML:
<html> <head> <title>Changing CSS</title> <link rel="stylesheet" type="text/css" href="positive.css"/> </head> <body> <a href="#" onclick="changeCSS('positive.css', 0);">STYLE 1</a> <a href="#" onclick="changeCSS('negative.css', 0);">STYLE 2</a> </body> </html> For simplicity, I used inline javascript. In production you would want to use unobtrusive event listeners.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
