时间戳

首页 > 解决方案 > 如何在按钮单击时缩放 html？

javascript - 如何在按钮单击时缩放 html？

问题描述

我正在尝试在 html 页面上提供一个功能，我可以使用它来放大和缩小文本。

我已经尝试过所有可用的浏览器。这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
        #zoomtext
        {
            transform: scale(1);
            transition: transform 0.2s ease-in-out;
        }
        </style>
        <script>
        window.addEventListener("load", function()
        {
            var zoom = 1;
            var zoomStep = 0.2;
        });
        document.getElementById("zoomIn").addEventListener("click",function(){zoom += zoomStep; document.getElementById("zoomtext").style.transform = "scale("+zoom+")";});
        document.getElementById("zoomOut").addEventListener("click",function(){if(zoom > zoomStep){zoom -= zoomStep; document.getElementById("zoomtext").style.transform = "scale("+zoom+")";}});
        </script>
    </head>
    <body>
        <button id="zoomOut">-</button>
        <button id="zoomIn">+</button>
        <article>
            <section id="zoomtext">
                <p>This is a text that I want to be able to zoom in and out by means of the two buttons indicating plus and minus.</p>
            </section>
        </article>
    </body>
</html>

没有错误信息。单击时没有任何反应。

标签： javascripthtmlzooming

解决方案

您的代码的问题是zoom并且zoomStep永远不会被评估。第一个事件侦听器只是创建一个函数，但其​​中的代码永远不会执行。

在此处查看工作代码：https ://codepen.io/marc-simplon/pen/vqYwYQ?editors=1010

推荐阅读