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).

Please try this: https://stackoverflow.com/questions/10464038/imitate-browser-zoom-with-javascript#10464073 — enxaneta, Oct 13 '18 at 19:43
Possible duplicate of [imitate browser zoom with JavaScript](https://stackoverflow.com/questions/10464038/imitate-browser-zoom-with-javascript) — Darren, Oct 14 '18 at 01:44

score 3 · Answer 1 · edited Oct 14 '18 at 18:55

3

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.

edited Oct 14 '18 at 18:55

Mr Lister

45,515
15
108
150

answered Oct 13 '18 at 19:44

settah abdelkader

52
3

I'll try, thanks! Next time use CTR + K to insert code! – MikeyJY Oct 13 '18 at 19:45

Daggie Blanqx - Douglas Mwangi · Answer 2 · 2018-10-13T21:19:17.813

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()

score 0 · Answer 3 · answered Oct 13 '21 at 18:31

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;
  }

How to zoom in/out page in javascript

3 Answers3