javascript - 没有javascript的字体大小更改

标签 javascript html css

我有一个下面的代码,我试图增加或减少文本的字体大小。如果 JavaScript 在我的浏览器中被禁用,我将无法增加或减少文本的大小。有什么办法可以不用 JavaScript,因为出于安全原因,我的浏览器确实使用 JavaScript。任何建议都会非常有帮助。

JSFIDDLE

<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> &nbsp; 
   <a href="javascript: changeFont('Medium');">Medium</a> &nbsp; 
   <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/

相关文章:

HTML "Table"带有滚动中间单元格?

javascript - 选择没有 .Class 或 #Id 的 div

javascript - 在 JavaScript 中将值从负数转换为正数或将正数转换为负数?

html - 如何在移动屏幕上增加我的 slider 宽度

javascript - 如何删除多行 HTML 排列中的空格?

javascript - 在弹出窗口以外的任何地方单击时关闭弹出窗口?

css - 在 div 中居中响应图像

javascript - 获取工具栏中 LeafNode 的标签值

javascript - 为什么 parentNode 会替换 td 的所有元素而不是指定的元素?

html - 使 html 表格元素响应水平滚动