html通过选择不同的option改变页面字体大小

最新推荐文章于 2023-10-10 16:16:34 发布

z_yuyu

最新推荐文章于 2023-10-10 16:16:34 发布

阅读量1.3k

点赞数

分类专栏： 😍😍😍前端三件套😍😍😍 文章标签： html js

本文链接：https://blog.csdn.net/z_yuyu/article/details/120345490

版权

😍😍😍前端三件套😍😍😍 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    p {
      font-size: 14px;
    }
  </style>
  <body>
    <select>
      <option class="small">小字体</option>
      <option class="middle">中字体</option>
      <option class="big">大字体</option>
    </select>
    <p>
      仓库管理系统 阿巴阿巴 二O一一年二月 www.aba-aba.com. 引言
      1.1. 编写目的
      为了以最小的代价在最短的时间内确定仓库管理系统项目是否值得去开发！
    </p>
  </body>
  <script>
    var select = document.querySelector("select");
    var p = document.querySelector("p");
    // select被点击时触发
    select.onclick = function () {
      // 第一个option被选择
      if (select.options[0].selected) {
        p.style.fontSize = 14 + "px";
      }
      // 第二个option被选择
      if (select.options[1].selected) {
        p.style.fontSize = 24 + "px";
      }
      // 第三个option被选择
      if (select.options[2].selected) {
        p.style.fontSize = 34 + "px";
      }
    };
  </script>
</html>

效果图

在这里插入图片描述

z_yuyu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
html通过选择不同的option改变页面字体大小

代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <t
复制链接

扫一扫