Cycle through css stylesheet files by clicking single div with javascript

Question

I want to swap the CSS stylesheet file without reloading the page. I'm wondering how to cycle through an array of multiple stylesheets by clicking a single source (div, #button), returning to the default, and then continuously looping through the list. It would also be great if the browser could remember what stylesheet the website is currently on for page to page continuity, though this is not necessary. The following is what I have so far...

HTML:

<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">

<div id="button" style="width: 100px; height: 100px; background-color: red;"></div>

Javascript:

var stylesheets = [
    "style1.css",
    "style2.css",
    "style3.css",
    "default.css"
];

function swapStyleSheet(sheet){
    document.getElementById('pagestyle').setAttribute('href', sheet);
}

No, there is no function written to make the button div activate swapStyleSheet — user3106225
– user3106225, Commented Jan 5, 2017 at 4:36
and selectedStyleSheetSet and styleSheetSets - at least for current browsers anyway — Jaromanda X
– Jaromanda X, Commented Jan 5, 2017 at 4:41

Igor Zalutski · Accepted Answer · 2017-01-05 04:50:04Z

1

One way to do so would be to shuffle the list of stylesheets and render the first one every time:

function nextSytlesheet() {
    stylesheets.push(stylesheets.shift());
    swapStyleSheet(stylesheets[0]);
}

But, what are you trying to achieve by reloading styles? Every CSS file initiates a GET request to the server, so unless your styles are huge it makes more sense to have one stylesheet per app and dynamically switch classes instead. To simulate the full stylesheet swapping, you can just prepend .style1 (with trailing space) class to every rule you have in style1.css, do the same for others, and then switch these classes on <body> instead of reloading stylesheets.

answered Jan 5, 2017 at 4:50

Igor Zalutski

1601 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Trevor B · Accepted Answer · 2017-01-07 06:56:12Z

Not sure what your purpose is, but you could just change the class names of elements on the page via a button, and have different styles associated with the classes in your main stylesheet.

Hope this helps! ;)

Edit: Just as Igor said. I didn't see his whole comment till now.

Edit 2: Sorry for the late response, but I was able to make a demo for you!

HTML:

<div id="fakeBody" class="normal">
  <p>Hello There! I change colors!</p>
  <button id="button">Click me to change colors</button>
</div>

CSS:

.normal, button {
  color: default;
  background-color: default;
}
.light, .light button {
  color: #0000ff;
  background-color: #ffffff;
}
.dark, .dark button {
  color: #ffffff;
  background-color: #000000;
}
.wood, .wood button {
  color: #444444;
  background-color: #dbcc48;
}
.textEditor, .textEditor button {
  color: #00ff00;
  background-color: #000000;
}

Javascript:

var body = document.getElementById("fakeBody"),
        themePosition = 0,
    maxThemePosition = 4;
document.getElementById("button").addEventListener("click", function(){
    themePosition++;
  if (themePosition > maxThemePosition) {
    themePosition = 0;
  }
    if (themePosition == 0) {
      body.className = "normal";
  } else if (themePosition == 1) {
    body.className = "light";
  } else if (themePosition == 2) {
    body.className = "dark";
  } else if (themePosition == 3) {
    body.className = "wood";
  } else if (themePosition == 4) {
    body.className = "textEditor";
  }
});

Working Jsfiddle

Collectives™ on Stack Overflow

Cycle through css stylesheet files by clicking single div with javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related