gpt4 book ai didi

javascript - 同时选择大字体和低视力 css 样式表

转载 作者:行者123 更新时间:2023-11-28 03:33:36 26 4
gpt4 key购买 nike

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

最佳答案

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

为此,首先要为您的样式表提供唯一的 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

关于javascript - 同时选择大字体和低视力 css 样式表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15994072/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com