问答博客标签用户活动
logo极客观点logo研发管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何用js设置选择网页字体大小？

头像
吻半边
    1379
    头像
    清蒸不是水煮
      3.1k21026

      HTML调用不上js，函数功能实现不了（理想效果：在网页中用户可以选择div中内容的字体大小）

      <!doctype html>
<html lang="en">
 <head >
   <meta chraset="UTF-8">
   <meta name="viewport" content="width=device-width initial-scale=1">
   <meta http-equive="X-UA-compatible" content="ID=edge">
   <title>选择器</title>
   <script language="javascript" >
   function doZoom(size){
     document.getElementById('zoom').style.fontSize=size+'px';
   }
   </script>
 </head>
 <body>
   <span>
     字号：[
     <a herf='javascript:doZoom(16)'>大</a>
     <a herf="javascript:doZoom(14)">中</a>
     <a herf="javascript:doZoom(12)">小</a>
     ]
   </span>
   <div id="zoom">Web 1.0（信息共享） Web技术发展的第一个阶段就是静态技术阶段，
   </div>
 </body>
</html>
      htmlcssjavascript
      阅读 8.2k
      3 个回答
      得票最新
      头像
      Smlion
        483

        <meta chraset="UTF-8"> 写错改成charset， herf 改成 href，这种错误不应该犯，还有script标签最好放在</body>之前

        头像
        小丑
          9171114

          改成这种吧，href里面你写的事件没有执行

          <!doctype html>
<html lang="en">
 <head >
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width initial-scale=1">
   <meta http-equive="X-UA-compatible" content="ID=edge">
   <title>选择器</title>
 </head>
 <body>
   <span>
     字号：[
     <a href='javascript:javascript:void(0)' onclick="doZoom(16)">大</a>
     <a href="javascript:javascript:void(0)"  onclick="doZoom(14)">中</a>
     <a href="javascript:javascript:void(0)"  onclick="doZoom(12)">小</a>
     ]
   </span>
   <div id="zoom">Web 1.0（信息共享） Web技术发展的第一个阶段就是静态技术阶段，</div>
 </body>
 <script language="javascript" >
   function doZoom(size){
       console.log(size);
     document.getElementById('zoom').style.fontSize=size+'px';
   }
   </script>
</html>
          头像
          已注销
            88313352

            移动端的还是pc端的？ 可以试一试，在html标签上添加一个属性，然后用来标示当前选中的字体大小，例如

            html data-size="1"  //标示一号大小的字

            然后使用scss去写css，用一个统一的方发，在写字体大小的时候每一个选择器前面可以添加这样一个属性，然后对应不用字体大小 。scss可以写这样的方法，只用调，可以到时候编译自动生成

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题
            宣传栏