EN
JavaScript - change web browser zoom level on click event
0
points
In this article, we would like to show you how to change web browser zoom level on click event using JavaScript.
Quick solution:
document.body.style.zoom = '50%';
Note:
CSS zoom property is non-standard,
transform: scale()should be used instead of this property, if possible.
Practical example
In this example, we create a function that changes CSS zoom property on click event.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<script>
function setZoom() {
document.body.style.zoom = '50%';
};
</script>
</head>
<body>
<input type="button" value="Click me!" onclick="setZoom()" />
</body>
</html>
Alternative solution
In this solution, as an alternative trick to change zoom, we use transform property to scale document body.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<script>
function setZoom() {
document.body.style.transform = 'scale(0.5)';
document.body.style.transformOrigin = 'left center';
};
</script>
</head>
<body>
<input type="button" value="Click me!" onclick="setZoom()" />
</body>
</html>
Note:
This approach requires additional container sizing controls that need to be adjusted.