How to zoom in/out page in javascript
Question
I want to make a button that zoom in/out the page in Google Chrome.(Like if i'm pressing ctrl and + or ctrl and -). Please help me. I don't want to zoom element(body).
3 answers
solution1
0 2018-10-13 19:44:49
There are many ways to do it,you have to write both ZoomIn and ZoomOut functions for it.
below is the working code.
function zoomIn()
{
var Page = document.getElementById('Body');
var zoom = parseInt(Page.style.zoom) + 10 +'%'
Page.style.zoom = zoom;
return false;
}
function zoomOut()
{
var Page = document.getElementById('Body');
var zoom = parseInt(Page.style.zoom) - 10 +'%'
Page.style.zoom = zoom;
return false;
}
(though it is Copied code).
And make sure you add style=”zoom: 100%” in your <body> tag of web page.
solution2
0 2018-10-13 20:16:39
Here is how to zoom in and out.
function zoomIn(){
var body = document.querySelector("body");
var currWidth = body.clientWidth;
if(currWidth == 1000000){
alert("Maximum zoom-in level of 1 Million reached.");
} else{
body.style.width = (currWidth + 50) + "px";
}
}
function zoomOut(){
var body = document.querySelector("body");
var currWidth = body.clientWidth;
if(currWidth == 500000){
alert("Maximum zoom-out level reached.");
} else{
body.style.width = (currWidth - 50) + "px";
}
}
Zoom in by running zoomIn() Zoom out by runnint zoomOut()
solution3
0 2021-10-13 18:31:30
set the zoom property in style of top level html element. Its the closest thing to browser zooming.
document.firstElementChild.style.zoom = 0.85;
You can use a step value of, say 0.05 on - and + buttons.
If you want to do it according to window. you can do it by:
window.onresize = function(){
let zoom = Number((window.innerWidth / window.screen.width).toFixed(3));
document.firstElementChild.style.zoom = zoom;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.