# Tricky thing for me.. style switcher tweak

**URL:** <https://forum.kirupa.com/t/tricky-thing-for-me-style-switcher-tweak/278380>\
**Category:** Uncategorized\
**Created:** [December 29, 2008, 7:45am UTC](https://forum.kirupa.com/t/tricky-thing-for-me-style-switcher-tweak/278380 "2008-12-29T07:45:27Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![hroth](https://avatars.discourse-cdn.com/v4/letter/h/8e8cbc/32.png) [@hroth](https://forum.kirupa.com/u/hroth)\
**Post date:** [December 29, 2008, 7:45am UTC](https://forum.kirupa.com/t/tricky-thing-for-me-style-switcher-tweak/278380/1 "2008-12-29T07:45:27Z")

</div>

I have a site that employs a style switcher between one css file and another. I would like to add in something that allows some the images in the page to be determined by which css file is active. I was thinking perhaps a JavaScript check with some sort of if statements? I looked into it and found a JavaScript call that should be able to get the name of the style employed. But first, let me paste in here the code for the switcher:

```auto
<div id="styleswitcher">
<a href="#" onclick="setActiveStyleSheet('dark'); return false;" title="Black Theme">
<img id="style_dark" src="templates/delicious_v1_1/images/style_dark_a.gif" name="style_dark" border="0" alt="dark theme" /></a>
<a href="#" onclick="setActiveStyleSheet('light'); return false;" title="White Theme">
<img id="style_light" src="templates/delicious_v1_1/images/style_light_a.gif" name="style_light" border="0" alt="light theme" /></a>
</div>

```

Here is the JavaScript function that might be on the right track, the only thing I’m thinking is that the function “getActiveStyleSheet” looks like it will be a part of the solution. If I could have some sort of if loop where let’s say 5 images can be either image\_01\_dark.jpg or image\_01\_light.jpg depending on what style is currently loaded… that would be awesome.  
Have the function run when the style switcher is used.

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

```

I’m ok at tweaking scripts that are close to what I’m looking for, but this is pretty out of my league. Any suggestions would be very much appreciated~!

-hroth