不使用javascript更改字体大小_Javascript_Html_Css

不使用javascript更改字体大小

javascript html css

不使用javascript更改字体大小,javascript,html,css,Javascript,Html,Css,我有一个下面的代码，我试图增加或减少文本的字体大小。如果浏览器中禁用了JavaScript，则无法增加或减少文本大小。有没有办法不用JavaScript，因为出于安全原因，我的浏览器使用JavaScript。任何建议都会很有帮助 .Small{font:12px Times New Roman，Arial，无衬线；} .Medium{font:15px Times New Roman，Arial，无衬线；} .Large{font:18px乘以新罗马体，Arial，无衬线；} 函数chang

我有一个下面的代码，我试图增加或减少文本的字体大小。如果浏览器中禁用了JavaScript，则无法增加或减少文本大小。有没有办法不用JavaScript，因为出于安全原因，我的浏览器使用JavaScript。任何建议都会很有帮助


.Small{font:12px Times New Roman，Arial，无衬线；}
.Medium{font:15px Times New Roman，Arial，无衬线；}
.Large{font:18px乘以新罗马体，Arial，无衬线；}
函数changeFont（样式表）
{
document.getElementById（'textArea'）。className=样式表；
}   
您的浏览器不支持JavaScript！
测试哪个会改变大小

没有好办法

你可以做一个非常可怕的黑客攻击，包括复选框，和一些非语义标记…这也会极大地限制你的设计选项

浏览器附带了用于调整内容大小的内置工具。相反，专注于创造一种流畅、反应灵敏的设计。让大小调整问题通过浏览器的内置缩放功能来处理。

我想有人提到过这一点，Javascript在大多数情况下都应该可以运行，所以不要担心，尽管CSS黑客很有趣，但有时在可读性、可靠性和兼容性方面并没有真正的用处

html，正文{字体系列：“Arial”；}
.content{字体大小：10px；}
.small:选中~.content{font size:10px；}
.medium:选中~.content{font size:20px；}
.large:选中~.content{font size:30px；}


我可以在没有Javascript的情况下更改字体大小一般来说，一旦呈现了页面并构建了DOM，没有JavaScript就无法对其进行更改。这就是JavaScript应该做的，也是您应该使用的
另一个一般性的说法是，“出于安全原因，我的浏览器不使用JavaScript”，在大多数情况下，这仅仅表明对当今web的工作方式缺乏正确的理解，在大多数情况下，这是完全错误的。

换句话说，如今，包括支付门户在内的所有页面都不会禁用JavaScript，而且，如果编码正确，JavaScript是安全的
但是，您可以使用CSS来实现这一点，例如，（取消）选中/选择隐藏的复选框/单选按钮，并在：checked
或：not（：checked）
元素之后使用不同样式的元素
下面是一个简单的例子：

.content{
字号：1.2rem；
}
#字体大小中等：选中~内容{
字体大小：1.8rem；
}
#大字体：选中~。内容{
字体大小：2.7rem；
}
/*剩下的只是造型，在练习中可以忽略*/
#font size small：选中~[for=“font size small”]，
#font size medium:选中~[for=“font size medium”]，
#大字体：选中~[for=“font size-large”]{
背景色：#F5；
颜色：黑色；
}
[对于^=“font size”]{
填充：.5rem1rem；
边框：1px实心#ddd；
显示：内联块；
保证金：0.5雷姆1雷姆0；
光标：指针；
颜色：#999；
}
[对于^=“font size”]：悬停{
背景色：#F5；
}
[name=“font size change”]{
位置：绝对位置；
z指数：-1；
可见性：隐藏；
}

小的
中等
大的
把你想要更改的文本放在这里。。。
给出否决投票的理由。。或者，如果答案已经存在，至少发布一个解决方案2017年有没有不带javascript的浏览器？有多个带有不同css的页面实例。（难以维护），或者如果它的php/.net。。您可以在交付给客户端之前更改css。（@MarcoSalerno-@Quentin是的，但这仍然没有意义
<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>