按钮放大与缩小字体

深处莫神

发布于 2022-8-9 17:49

浏览

0收藏

按钮放大缩小对应字体

按钮放大与缩小字体-鸿蒙开发者社区
1.获取需要使用的元素,可以通过document.getElementById
2.绑定事件，是直接去获取的行内元素样式
3.获取字体大小的时候存在单位px,利用parseInt()转换为整数!
4.在放到到一定程度时给提示

按钮放大与缩小字体-鸿蒙开发者社区

代码如下：

<!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>
    <style>

    </style>
</head>

<body>
    <h1>字体放大与缩小</h1>
    <button id="big">放大</button> <br />
    <button id="small">缩小</button> <br />
    <span id="friend" style="font-size: 16px;">我们是好朋友</span>
</body>

</html>
<script>
    var big = document.getElementById('big')
    // console.log('收到')

    var small = document.getElementById('small')
    var friend = document.getElementById('friend')
    // console.log('朋友')

    // 绑定事件
    big.onclick = function () {
        var size = parseInt(friend.style.fontSize)
        // console.log(size)
        if (size >= 100) {
            alert('超过最大限制')
            return
        }
        friend.style.fontSize = `${size + 10}px`
    }


    // 缩小
    small.onclick = function () {
        var size = parseInt(friend.style.fontSize)
        if (size <= 16) {
            alert('已经达到最小限制')
            return
        }
        friend.style.fontSize = `${size - 10}px`
    }

</script>

分类

其他

标签

已于2022-8-9 17:50:54修改