Javascript 多个样式表-仅禁用特定组_Javascript_Html_Css

Javascript 多个样式表-仅禁用特定组

javascript html css

Javascript 多个样式表-仅禁用特定组,javascript,html,css,Javascript,Html,Css,我有一个主样式表和两组备用样式表。当一组样式表被激活时，这两组样式表都被禁用。主样式表是持久的，从不被禁用。备用样式表仅包含从主样式表中提取的不同元素，并且仅在激活时实现。我将这个类添加到两个组中，以查看是否可以在一个组中激活一个组并停用该组中的其他组，但在另一个组中不激活任何组。我尝试了许多其他样式转换程序和jquery方法，但都没有成功，这是迄今为止最好的结果。我对这一切都很陌生，希望能得到任何帮助 <!DOCTYPE html> <html xmlns="http://w

我有一个主样式表和两组备用样式表。当一组样式表被激活时，这两组样式表都被禁用。主样式表是持久的，从不被禁用。备用样式表仅包含从主样式表中提取的不同元素，并且仅在激活时实现。我将这个类添加到两个组中，以查看是否可以在一个组中激活一个组并停用该组中的其他组，但在另一个组中不激活任何组。我尝试了许多其他样式转换程序和jquery方法，但都没有成功，这是迄今为止最好的结果。我对这一切都很陌生，希望能得到任何帮助

<!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>

中的styleswitcher.js文件

函数setActiveStyleSheet（标题）{
变量i，a，main；
对于（i=0；（a=document.getElementsByTagName（“链接”）[i]）；i++）{
if（a.getAttribute（“rel”）.indexOf（“style”）！=-1&&a.getAttribute（“title”））{
a、 禁用=真；
如果（a.getAttribute（“title”）==title）a.disabled=false；
}
}
}
函数getActiveStyleSheet（）{
varⅠ，a；
对于（i=0；（a=document.getElementsByTagName（“链接”）[i]）；i++）{
如果（a.getAttribute（“rel”）.indexOf（“style”）！=-1&&a.getAttribute（“title”）&&a.disabled）返回a.getAttribute（“title”）；
}
返回null；
}
函数getPreferredStyleSheet（）{
varⅠ，a；
对于（i=0；（a=document.getElementsByTagName（“链接”）[i]）；i++）{
如果（a.getAttribute（“rel”）.indexOf（“style”）！=-1
&&a.getAttribute（“rel”）.indexOf（“alt”）=-1
&&a.getAttribute（“标题”）
)返回a.getAttribute（“标题”）；
}
返回null；
}
函数createCookie（名称、值、天数）{
如果（天）{
变量日期=新日期（）；
date.setTime（date.getTime（）+（天*24*60*60*1000））；
var expires=“；expires=“+date.togmString（）；
}
else expires=“”；
document.cookie=name+“=”+value+expires+“path=/”；
}
函数readCookie（名称）{
变量nameEQ=name+“=”；
var ca=document.cookie.split（“；”）；
对于（变量i=0；i


原始样式表选择器
<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>










如果有可能以另一种被认为是正确的方式来解决这个问题，我很愿意被指向那个方向去解决它。如果不是的话，我仍然很想知道我所拥有的一切是否有可能，我想这是一个教训。谢谢。
更新

听起来，您希望能够一次从每个组中激活一个样式表。由于您使用的是cookies，所以您希望能够为每个组保存每个样式表，这样用户的所有设置都是正确的。我不明白您的getPreferredStyleSheet（）
函数的作用是什么，因为它只返回作为样式表的第一个
。如果你开始的时候已经打开了一些链接，看起来你根本不需要这个功能。我想，当您创建cookie时，您可以调用getActiveStyleSheets（）
，因为可以安全地假设，当用户离开页面时，他们会按照自己喜欢的方式进行设置
总之，我编辑了您的函数，以允许从cookie中设置多个样式表，并将多个样式表保存到cookie中。您必须更新调用，因为我在函数名中添加了一个s

JavaScript
function setActiveStyleSheets(ids){
  ids = ids.split(',');
  var i, j, l, link;
  for(i=0; (link = document.getElementById(ids[i])); i++){
    for(j=0; (l = document.getElementsByTagName('link')[j]); j++){
      if(l.hasAttribute('switch') && l.className.indexOf(link.className) !== -1)
        l.removeAttribute('href');
    }
    link.href = link.getAttribute('switch');
  }
}

function getActiveStyleSheets(){
  var i, link, active = [];
  for(i=0; (link = document.getElementsByTagName('link')[i]); i++){
    if(link.hasAttribute('switch') && link.href){
      active.push(link.id);
    }
  }
  return active.join(',');
}

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 i, c, ca = document.cookie.split(';');
  for(i=0; (c = ca[i]); 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 || getActiveStyleSheets();
  setActiveStyleSheets(title);
}

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

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

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

...

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

JavaScript-将setActiveStyleSheet
函数更改为：
function setActiveStyleSheet(id){
  var i, l;
  var link = document.getElementById(id);
    for(i=0; (l = document.getElementsByTagName('link')[i]); i++){
      if(l.hasAttribute('switch') /*&& l.className.indexOf(link.className) !== -1*/)
        l.removeAttribute('href');
    }
    link.href = link.getAttribute('switch');
}

如果
未指向样式表，则无法进行样式设置。当您单击
项目时，它会将id传递给此函数，此函数会检查
是否具有开关
属性，如果有，它会确保href
属性设置为空。现在我不太清楚您是否希望激活每个类中的
。如果这样做，只需从If语句的第二部分删除/**/
。如果没有，那么您可以删除该部分。无论如何，在删除所有链接href
属性后，具有相应id的
将其href
属性设置为其开关
属性。因此，它是活动的，而其余的都不是
就像我说的，我相信有更好的方法，但这很容易，而且已经很晚了，我要去睡觉了。希望这能有所帮助。
谢谢你的努力。我在半夜醒来，今天早上再试一次。我不得不这么做。现在主样式表仍然处于活动/持久状态。这两个组中没有一个在页面加载时加载，每个组应该有一个。组1的开关正确，但组2的开关没有“钩子”链接到其他样式表。组2没有禁用组1，这是正确的。没有任何东西可以禁用同样正确的主样式表。这看起来很棘手，但很有趣。还有什么想法吗？@user1770110-哦，我不知道你也希望在页面加载中从每个组加载一个。无论您要加载哪个，也要在代码中添加一个带有适当链接的href
属性。i、 e.谢谢，现在它可以在主样式表顶部为每个组工作。只是还没有
<link switch="/files/theme/body1.css" rel="stylesheet" type="text/css" class="group1" id="body1" />
<link switch="/files/theme/body2.css" rel="stylesheet" type="text/css" class="group1" id="body2" />
<link switch="/files/theme/body3.css" rel="stylesheet" type="text/css" class="group1" id="body3" />

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

function setActiveStyleSheet(id){
  var i, l;
  var link = document.getElementById(id);
    for(i=0; (l = document.getElementsByTagName('link')[i]); i++){
      if(l.hasAttribute('switch') /*&& l.className.indexOf(link.className) !== -1*/)
        l.removeAttribute('href');
    }
    link.href = link.getAttribute('switch');
}