change two buttons into one (toggle)

I have this code, which swich 2 different external .css after click on one of two buttons and it works fine, but I need to change it and make only one button with toggling between these two .css files. Thank you

<script type="text/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(0).replaceChild(newlink, oldlink);
  }
</script>

<a href="#" onclick="changeCSS('css/main.css', 1);">STYLE 1</a>
<a href="#" onclick="changeCSS('css/main2.css', 1);">STYLE 2</a>
<div class="box">Lorem ipsum dolor si开发者_JAVA技巧t amet, consectetuer adipiscing elit.</div>

var cssFiles = ['css/main.css', 'css/main2.css'];
var currentFile = 0;

function changeCSS(cssLinkIndex) {

    if(currentFile + 1 < cssFiles.length) currentFile++;
    else currentFile = 0;

    var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

    var newlink = document.createElement("link")
    newlink.setAttribute("rel", "stylesheet");
    newlink.setAttribute("type", "text/css");
    newlink.setAttribute("href", cssFiles[currentFile]);

    document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
}

You can then call that like this:

<a href="#" onclick="changeCSS(1);">CHANGE STYLE</a>

It simply maintains a counter that is incremented each time the button is clicked, to point to a different index of an array containing the names of your stylesheets. If the counter reaches the maximum, it wraps around to 0 and starts again.

To do this you need a flag, which will enable you to distinguish which style is presently loaded. For example you could add some class on your button, and based on this class you would load different styles. On each click you would have to update that flag to have the actual state up to date.

You could do somthing like this:

<script type="text/javascript">

    var cssFile = "css/main.css";

    function changeCSS(cssLinkIndex) {

    if (cssFile == "css/main.css")
        cssFile = "css/main2.css";
    else
        cssFile = "css/main.css";

    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(0).replaceChild(newlink, oldlink);
  }
</script>

<a href="#" onclick="changeCSS(1);">STYLE 1</a>
<a href="#" onclick="changeCSS(1);">STYLE 2</a>
<div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>

Something like this would work:

<script type="text/javascript">

var CSSToggle = false;

function changeCSS(cssLinkIndex) {

    CSSToggle = !CSSToggle;
    var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

    var newlink = document.createElement("link")
    newlink.setAttribute("rel", "stylesheet");
    newlink.setAttribute("type", "text/css");

    If(CSSToggle){
        cssFile = "main.css";
    } else {
        cssFile = "main2.css";
    }

    newlink.setAttribute("href", cssFile);

    document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
}
</script>

<a href="#" onclick="changeCSS(1);">Toggle styles</a>
<div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>

However, there are cleaner ways of switching CSS files. For example, you could use a single CSS file, like so:

body.styles1 div.box { //styles here }
body.styles2 div.box { //styles here }

Then when you want to switch, change the body class to styles1 or styles2. Fewer HTTP requests (although it does bloat the CSS a bit) and fewer DOM operations.