userNaN userNaN - 1 year ago 74
CSS Question

Toggle CSS Sheets (on click) with Javascript

Trying to find code for switching between two style sheets with just one button. I've tried to adapt others' solutions, but to no avail (yet). Here's my most recent attempt:

Set Up:

<link id="style1" rel="stylesheet" type="text/css" href="resumecss.css" />
<script type="text/javascript">
function toggle() {
var el = document.getElementById("style1");
if (el.href == "resumecss.css") {
el.href = "resumecssinvert.css";
else {
el.href = "resumecss.css";


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

The purpose being to flip between two skins on one page repeatably.

Thanks in advance to those of you kind/knowledgeable to help.

Answer Source

This is the shortest solution I could think of (and works probably in all browsers):

function toggle() {
  var a = document.getElementById("style1");
  a.x = 'resumecssinvert' == a.x ? 'resumecss' : 'resumecssinvert'; // short if
  a.href = a.x + '.css';

As everything in javascript is a object you can simply add properties.

Assuming that your default css is "resumecss"

The first time x is not set and returns false, so "resumecssinvert" will be set.

The second time time x is set and returns true and switches back. Everything works as it should.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download