同时选择大字体和低视力 css 样式表答案

【问题标题】：Selecting large font and low vision css stylesheets at the same time同时选择大字体和低视力 css 样式表
【发布时间】：2013-04-06 07:42:55
【问题描述】：

我正在设计我的第一个网站，但遇到了以下问题。我有 3 个样式表：一个用于低视力；一种是大字体，一种是默认字体。我有 3 个按钮可以选择这些，但我一次只能选择一个。我想知道是否可以同时选择 2 个，即低视力和大字体，或者我需要创建第四个样式表。

这就是我所拥有的......

<link rel="stylesheet" type="text/css" href="css/style.css" title="default" />
<link rel="stylesheet" type="text/css" href="css/large_font.css" title="large_font"     disabled />
<link rel="stylesheet" type="text/css" href="css/low_vision.css" title="low_vision" disabled />

<script type="text/javascript" src="js/styleswitch.js"></script>
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.scrollTo-min.js'></script>
<script type='text/javascript' src='js/jquery.localscroll-min.js'></script>
<script type="text/javascript">
$(document).ready(function () {
$.localScroll();
});
</script> 

<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" /> 
<script type="text/JavaScript" src="js/slimbox.js"></script> 

</head>

<body>

<div id="background">

<div id="wrapper">
    <div id="accessibility">
            <ul id="access_list">
                <li><a href="#" onclick="setActiveStyleSheet('default'); return false;">Default</a> | </li>
                <li><a href="#" onclick="setActiveStyleSheet('large_font'); return false;">Large Font</a> | </li>
                <li><a href="#" onclick="setActiveStyleSheet('low_vision'); return false;">Low Vision</a></li>
            </ul>
        </div>
    <div id="header">
        <div id="site_title"><a href="#">Sean's Site</a></div>

    </div>

【问题讨论】：

听不懂你在说什么
抱歉，我只是尝试使用 javascript 同时运行 2 个 css 样式表，但我无法弄清楚，所以如果可能的话，我正在寻求任何帮助。
但是当您在一页上添加任何 css 时，它将始终运行所有 css。意味着如果页面上有 20 个 css，那么它也会运行所有 css。
我知道是的，但我已经设置好了，这样我就可以通过 javascript 在单独的样式表之间切换，以满足视障人士的可访问性要求。我只是希望能够同时激活 2 个。可访问性 div 就是发生这种情况的地方！

标签： javascript jquery html css web

【解决方案1】：

如果我对您的理解正确，您希望有选择地启用/禁用每个样式表，而不是选择其中一个作为“活动的”。

为此，首先为您的样式表指定唯一的 ID：

<link rel="stylesheet" type="text/css" href="css/style.css" id="default" />
<link rel="stylesheet" type="text/css" href="css/large_font.css" id="large_font"     disabled />
<link rel="stylesheet" type="text/css" href="css/low_vision.css" id="low_vision" disabled />

然后创建javascript函数toggleStylesheet:

<script type="text/javascript">
  function toggleStylesheet(id) {
    var o = document.getElementById(id);
    if (o.hasAttribute('disabled') {
      o.removeAttribute('disabled');
    } else {
      o.setAttribute('disabled', 'disabled');
    }
  }
</script>

现在您可以在界面中使用该功能：

<ul id="access_list">
  <li><a href="#" onclick="toggleStylesheet('default')">Default</a></li>
  <li><a href="#" onclick="toggleStylesheet('large_font')">Large Font</a></li>
  <li><a href="#" onclick="toggleStylesheet('low_vision')">Low Vision</a></li>
</ul>

有关toggleStylesheet 函数的更多信息，另请参阅此问答：HTML "link" (stylesheet) disabled attribute

【讨论】：