alternate css files set selection NEW QST

Question

THIS QµUESTION HAS NOT HAD AN ANSWER YET (WRONG TAGGING) I would like to give the user the ability to choose between different styles (CSS).

Do make sure you read the bold characters before answering (I know very simla questions have been asked but this one is DIFFERENT ;-) Here is why:

** I cannot alter the original HTML files** (because they are too numerous and produced by a programme that creates mini websites, with tons of small pages, all more or less on the same canvas)

The pages all refer to a css file like so:

h r e f="http://...mypage1.css" type="text/css" rel="stylesheet"

but there is no "id".

I have read, on this site, of possibilities to switch from one css address to another,by grabbing the id (in JS) and changing its's url.

But is there any possibility without altering the HTML? Thanks

http://www.thesitewizard.com/javascripts/change-style-sheets.shtml — Mustafa sabir, May 30 '14 at 14:11
YES i can! The pages all refer to one js page that I am free to modify. — tgtbtrue, May 30 '14 at 15:33

Liam · Answer 1 · 2014-05-30T14:11:16.060

There's a great example of this on CSS Tricks. Here's the demo, download the code example and take a peek. It uses javascript to switch.

Here's the jist of it:

HTML HEAD

<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="alternate stylesheet" type="text/css" href="stylealt1.css" title="alternate 1" />
<link rel="alternate stylesheet" type="text/css" href="stylealt2.css" title="alternate 2" />

<script>

    function setActiveStyleSheet(title) {
      var i, a, main;
      for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
        if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
          a.disabled = true;
          if(a.getAttribute("title") == title) a.disabled = false;
        }
      }
    }

    function getActiveStyleSheet() {
      var i, a;
      for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
        if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
      }
      return null;
    }

    function getPreferredStyleSheet() {
      var i, a;
      for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
        if(a.getAttribute("rel").indexOf("style") != -1
           && a.getAttribute("rel").indexOf("alt") == -1
           && a.getAttribute("title")
           ) return a.getAttribute("title");
      }
      return null;
    }

    function createCookie(name,value,days) {
      if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
      }
      else expires = "";
      document.cookie = name+"="+value+expires+"; path=/";
    }

    function readCookie(name) {
      var nameEQ = name + "=";
      var ca = document.cookie.split(';');
      for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
      }
      return null;
    }

    window.onload = function(e) {
      var cookie = readCookie("style");
      var title = cookie ? cookie : getPreferredStyleSheet();
      setActiveStyleSheet(title);
    }

    window.onunload = function(e) {
      var title = getActiveStyleSheet();
      createCookie("style", title, 365);
    }

    var cookie = readCookie("style");
    var title = cookie ? cookie : getPreferredStyleSheet();
    setActiveStyleSheet(title);

</script>

HTML BODY

<a href="#" onclick="setActiveStyleSheet('default'); return false;"><img src="defaultstyle.jpg" alt="default style" /></a> 
<a href="#" onclick="setActiveStyleSheet('alternate 1'); return false;"><img src="altstyle1.jpg" alt="alternate style 1" /></a> 
<a href="#" onclick="setActiveStyleSheet('alternate 2'); return false;"><img src="altstyle2.jpg" alt="alternate style 2" /></a>

Please share the code directly in your answer; links can break over time. — code4coffee, May 30 '14 at 14:07
Also downvoting. Will remove if you add code. As Code4Coffee says, links can break. Without code here, this answer will be useless if CSS Tricks every disappears. As long as you provide the link and state the source, you won't be stealing any ideas, and it'll future proof the question. — Kelderic, May 30 '14 at 14:08
Thanks all for you very quick answers! However they were a bit TOO quick. I cannot edit the HTML. I can just make reference to the div's that are already in place. (There are a few "spare ones.) — tgtbtrue, May 30 '14 at 15:35

alternate css files set selection NEW QST

1 Answers1