JavaScript - How to get css zoom level?

Question

a simple question. I want to use CSS Zoom level to resize my Site oncklick.

I want to catch the css zoom from "html" element.

CSS

html{zoom:1}

JavaScript

function zoomIn(){
altzoom = document.documentElement.style.zoom;
zoomIn = (altzoom + 0.1);
document.documentElement.style.zoom = zoomIn; 
}

HTML

<button onclick= "zoomIn()">Zoom +</button>

If i click on "zoom +" i only get Zoom level of 0.1 so i think i don't get an output from document.documentElement.style.zoom;

result is: zoom: 0.1;

There are an special value to get current css zoom lvl?

I will be happy to fix it.

Answer 1

Maybe it's because in your CSS file, the attribute zoom of your element is not set, so the JS can't find a value to put in "altzoom" . Try to put it in your CSS declaration.

Answer 2

You can't get the zoom level of the style sheet. Well there is a way but that would make things overly complicated. I recommend setting it directly in javascript:

document.documentElement.style.zoom = 1;

See below, don't forget the parseFloat as it makes sure that the 0.1 is added right. If you want control over the value in your back end code (if there is any) you can also set/get this value on/from an attribute or hidden field.

Off topic: Don't set the variables in your function as global. It doesn't harm now but it's bad practice to have zoomIn also as a function name in global scope.

function zoomIn(){
    var altzoom = parseFloat(document.documentElement.style.zoom);
    var zoomIn = altzoom + 0.1;
    document.documentElement.style.zoom = zoomIn; 
}