2

我正在设计我的第一个网站，但我遇到了以下问题。我有 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>
4

1 回答 1

0

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

为此，首先为您的样式表提供唯一的 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“链接”（样式表）禁用属性

于 2013-04-15T00:50:48.423 回答