单击按钮后如何缩放html？
[英]How can I zoom html upon button click?
问题描述
我正在尝试在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>
没有错误信息。 单击没有任何反应。
3 个解决方案
解决方案1
1 2019-06-11 14:52:32
- 在
body末尾添加script - 在eventlistener回调外部分配
zoom, zoomStep变量
<!DOCTYPE html> <html> <head> <style type="text/css"> #zoomtext { transform: scale(1); transition: transform 0.2s ease-in-out; } </style> </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> <script> 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> </body> </html>
解决方案2
1 2019-06-11 14:53:49
您的代码的问题在于，从未评估过zoom和zoomStep 。 第一个事件侦听器仅创建一个函数，但永远不会执行其中的代码。
在此处查看工作代码： https : //codepen.io/marc-simplon/pen/vqYwYQ?editors=1010
解决方案3
0 2019-06-11 14:55:53
如果您需要设置整个窗口的缩放比例，那么在没有外部插件的情况下可能无法实现（请参阅更改浏览器的缩放比例 ）
如果要专门为#zoomtext元素设置缩放比例，则可以使用“ zoom” CSS属性（ https://developer.mozilla.org/en-US/docs/Web/CSS/zoom ），但这是不标准。 解决此问题的另一种方法是增加或减少#zoomtext元素上的font-size CSS属性：
document.getElementById("zoomtext").style.fontSize = '12px'
单击按钮后，无法使JavaScript重定向到另一个HTML页面
[英]Can't get javascript to redirect to another html page upon button click
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.