2

私は最初の Web サイトの 1 つをデザインしている最中で、次の問題に行き詰まっています。私は 3 つのスタイルシートを持っています。1 つは大きいフォント用で、もう 1 つはデフォルトのフォントです。これらを選択するための 3 つのボタンがありますが、一度に 1 つしか選択できません。ロービジョンと大きなフォントの 2 つを同時に選択できるかどうか、または 4 番目のスタイルシートを作成する必要があるかどうか疑問に思っていました。

これが私が持っているものです..

<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

あなたが正しく理解している場合は、スタイルシートの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>

機能の詳細については、この Q&A も参照してくださいtoggleStylesheet: HTML「リンク」(スタイルシート) 無効化属性

于 2013-04-15T00:50:48.423 に答える