我有一个下面的代码,我试图增加或减少文本的字体大小。如果 JavaScript 在我的浏览器中被禁用,我将无法增加或减少文本的大小。有什么办法可以不用 JavaScript,因为出于安全原因,我的浏览器确实使用 JavaScript。任何建议都会非常有帮助。
<html>
<head>
<style type="text/css">
.Small{ font: 12px Times New Roman, Arial, Sans-Serif; }
.Medium{ font: 15px Times New Roman, Arial, Sans-Serif; }
.Large{ font: 18px Times New Roman, Arial, Sans-Serif; }
</style>
<script language="JavaScript">
function changeFont(styleSheet)
{
document.getElementById('textArea').className=styleSheet;
}
</script>
<noscript>Your browser does not support JavaScript!</noscript>
</head>
<body>
<span class="Small" id="textArea">Test which will change size</span>
<br><br><br>
<a href="javascript: changeFont('Small');">Small</a>
<a href="javascript: changeFont('Medium');">Medium</a>
<a href="javascript: changeFont('Large');">Large</a>
</body>
</html>
最佳答案
我想有人提到过这一点,Javascript 在大多数情况下应该是可运行的,所以不用担心,虽然 CSS hack 很有趣,但有时在可读性、可靠性和兼容性方面并不是很有用。
html, body { font-family: "Arial"; }
.content { font-size: 10px; }
.small:checked ~ .content { font-size: 10px; }
.medium:checked ~ .content { font-size: 20px; }
.large:checked ~ .content { font-size: 30px; }
<input class="small" name="font-radio" type="radio" checked="checked"/>
<input class="medium" name="font-radio" type="radio"/>
<input class="large" name="font-radio" type="radio"/>
<div class="content">I can change fontsize without Javascript!</div>
关于javascript - 没有javascript的字体大小更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47132536/