Question

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

Answer 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

同时选择大字体和低视野css样式表

1 个答案: