字体大小变化小demo

最新推荐文章于 2026-01-01 15:39:09 发布

原创最新推荐文章于 2026-01-01 15:39:09 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #前端 #javascript

js 专栏收录该内容

19 篇文章

订阅专栏

本文探讨如何通过CSS调整字体大小，实现为老年用户提供易读体验，并提出结合语音识别功能的建议，展示了如何在button元素上设置cursor:pointer以增强互动。

效果

放大或缩小字体

应用场景

针对老年用户的人文关怀

建议搭配语音识别功能

可能用到的点

style部分

 <style>
        button{
            cursor: pointer;
        }
    </style>

CSS中cursor:pointer的作用_sx_lz_1119的博客-优快云博客_cursor pointer

body部分

<body>
    <div class="set_but">
        <button>-</button>
        <button>+</button>
    </div>
    <div class="text_box">
        <p>文本内容</p>
    </div>
    
</body>

script部分

<script>
        let but = document.querySelectorAll(".set_but .but");//类数组
        let textBox = document.querySelector(".text_box");//单个
        let num = 16;
      
        //加功能
        but[1].onclick=()=>{
            num--
            textBox.style.fontSize= num + "px"
        }
          //减功能
      but[0].onclick=()=>{
        num++
        textBox.style.fontSize=num+"px"
      }
    </script>

其中but[] 中0.1用来区别同名but按钮