Search code examples
javascripthtmlcsscookieshref

How to use cookies to change css <link href="#">?

i'm using this script to change the css link href="#" on the targeted document:

<script type='text/javascript'>
function toggle() {
    var el = document.getElementById("style1");
    if (el.href.match("css/style.css")) {
        el.href = "css/style-b.css";    
    }
    else {
        el.href = "css/style.css";  
    }
}

with:

<link id="style1" rel="stylesheet" href="css/style.css" type="text/css" media="screen">

and with button click: 

<button type="button" onclick="toggle()">Switch</button>

but with this click i need to change the css link href="#" to all my .html documents.

how to do this with cookies?

(btw i'm beginner with cookies and js.. so i will need the whole code if can)

Thanks

Solution

  • The following article explains exactly what you are looking for - the ability to define alternative style sheets, how to switch between them, and to store that choice in a cookie.

    http://alistapart.com/article/alternate

    Read the article first, but see also the completed example JavaScript file Paul Sowden has written:

    http://d.alistapart.com/alternate/styleswitcher.js