Question

我有一个下面的代码，我试图增加或减少文本的字体大小。如果在我的浏览器中禁用了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> &nbsp; 
   <a href="javascript: changeFont('Medium');">Medium</a> &nbsp; 
   <a href="javascript: changeFont('Large');">Large</a>

</body>
</html>

Answer 1

我想有人提到这一点，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>

Answer 2

没有好办法。

你可以做一个非常可怕的黑客攻击，包括the :checked pseudo-class，general sibling combinator和一些非语义标记......这也会大大限制你的设计选项。

浏览器附带内置工具，用于调整内容大小。专注于创造流畅，反应灵敏的设计。让我们使用浏览器的内置缩放功能处理大小调整问题。

Answer 3

作为一般性陈述，一旦页面被渲染并构建了DOM，您就无法在没有JavaScript的情况下进行更改。这应该是JavaScript应该做什么以及那是你应该使用的。

作为另一个一般性陈述，＆＃34;出于安全原因，我的浏览器不使用JavaScript＆＃34; ，在大多数情况下，只是表明缺乏对当今网络工作原理的正确理解，对于大多数情况下，这是完全错误的换句话说，今天，包括付款门户在内的任何网页都不会禁用JavaScript，并且在正确编码时， JavaScript是安全的 。

但是，您可以使用CSS执行此操作，例如，（取消）检查/选择隐藏的复选框/单选按钮，并在:checked或:not(:checked)元素之后使元素的样式不同。

这是一个简单的例子：

＆＃13;

.content {
  font-size: 1.2rem;
}

#font-size-medium:checked ~ .content {
  font-size: 1.8rem;
}

#font-size-large:checked ~ .content {
  font-size: 2.7rem;
}

/* the rest is just styling, can be ignored for the purpose of the exercise */

#font-size-small:checked ~ [for="font-size-small"],
#font-size-medium:checked ~ [for="font-size-medium"],
#font-size-large:checked ~ [for="font-size-large"] { 
  background-color: #f5f5f5;
  color: black;
}

[for^="font-size"] {
  padding: .5rem 1rem;
  border: 1px solid #ddd;
  display: inline-block;
  margin: 0 .5rem 1rem 0; 
  cursor:pointer;
  color: #999;
}
[for^="font-size"]:hover {
  background-color: #f5f5f5;
}
[name="font-size-change"] {
  position: absolute;
  z-index: -1;
  visibility: hidden;
}

＆＃13;

<input type="radio" id="font-size-small" name="font-size-change" checked>
<input type="radio" id="font-size-medium" name="font-size-change">
<input type="radio" id="font-size-large" name="font-size-change">
<label for="font-size-small">Small</label>
<label for="font-size-medium">Medium</label>
<label for="font-size-large">Large</label>
<div class="content">

  Put the text you want changed here...
  
</div>

＆＃13;

但是请注意，渲染中的这种变化不会改变DOM中的任何内容。元素保持不变，您只需通过（取消）检查<input>来改变CSS规则适用于它们。

没有javascript的字体大小更改

3 个答案: