Múltiples hojas de estilo - solo deshabilitar grupo específico

Question

Oct 24, 2012, 06:43 AM

Múltiples hojas de estilo - solo deshabilitar grupo específico

Tengo una hoja de estilo principal con dos grupos de hojas de estilo alternativas. Los dos grupos alternativos de hojas de estilo se desactivan cuando se activa una. La hoja de estilo principal es persistente y nunca deshabilitada. Las hojas de estilo alternativas solo contienen elementos diferentes que se sacan de la hoja de estilo principal y solo se implementan cuando se activan. Agregué la clase con los dos grupos para ver si podía lograr activar una dentro de un grupo y desactivar las otras en ese grupo, pero ninguna en el otro grupo. He probado muchos otros modificadores de styler y métodos jquery y no he llegado a ninguna parte, este es el mejor resultado hasta ahora. Soy realmente nuevo en todo esto y agradecería cualquier ayuda.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link href="/files/theme/mainstyle.css" rel="stylesheet "type="text/css"/>

<link href="/files/theme/body1.css" rel="stylesheet" type="text/css" class="group1" title="body1" />
<link href="/files/theme/body2.css" rel="stylesheet" type="text/css" class="group1" title="body2" />
<link href="/files/theme/body3.css" rel="stylesheet" type="text/css" class="group1" title="body3" />

<link href="/files/theme/para1.css" rel="stylesheet" type="text/css" class="group2" title="para1" />
<link href="/files/theme/para2.css" rel="stylesheet" type="text/css" class="group2" title="para2" />
<link href="/files/theme/para3.css" rel="stylesheet" type="text/css" class="group2" title="para3" />

<script type="text/javascript" src="/files/theme/styleswitcher.js"></script>

</head>

el archivo styleswitcher.js dehttp://www.alistapart.com/articles/alternate/

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);

Selector de hojas de estilo en bruto

<ul>
<li> <a href="#" 
onclick="setActiveStyleSheet('body1'); 
return false;">body1</a></li>
<li> <a href="#" 
onclick="setActiveStyleSheet('body2'); 
return false;">body1</a></li>
<li> <a href="#" 
onclick="setActiveStyleSheet('body3'); 
return false;">body3</a></li>
<li> <a href="#" 
onclick="setActiveStyleSheet('para1'); 
return false;">para1</a></li>
<li> <a href="#" 
onclick="setActiveStyleSheet('para2'); 
return false;">para2</a></li>
<li> <a href="#" 
onclick="setActiveStyleSheet('para3'); 
return false;">para3</a></li>
</ul>

Si es posible abordar esto de otra manera que se considere correcta, me encantaría que me indicaran en esa dirección para averiguarlo. Si no, me gustaría saber si esto es posible con lo que tengo, aprendiendo una lección, supongo. Gracias.