Search code examples
javascripthtmlfirefoxbrowserzooming

How to set zoom on a element using Javascript on Firefox?

I can change a page element on Chrome using zoom

document.getElementById("pane-side").style.zoom = 0.5

Looks like Firefox did not support zoom, when i run the same code nothing happens.

Im searching for how to use zoom on Firefox, and i got this code:

document.getElementById("pane-side").style["-moz-transform"] = "scale(0.5)"

But the result was not what I expected:

enter image description here

Im trying to zoom out the element like on Chrome, any advice?

-EDIT- The element I'm trying to zoom in is from the page web.whatsapp.com, the panel where show some contacts when you type something in the search (like on the chrome photo).

Solution

  • zoom is not supported by FireFox.

    Solutions below should work as you expect, only adjust numbers for your needs:

    document.getElementById("pane-side").style.transform = "scale(0.5)";
document.getElementById("pane-side").style.transformOrigin = "left top";
document.getElementById("pane-side").style.width = "795px";
document.getElementById("pane-side").style.minHeight = "1700px";
document.getElementById("pane-side").style.alignSelf = "flex-start";

    Or CSS version:

    #pane-side {
    transform: scale(0.5);
    transform-origin: left top;
    width: 795px;
    min-height: 1700px;
    align-self: flex-start;
}

    Or eventually <style> element added with JS:

    var style = document.createElement('style');
style.innerHTML = `
    #pane-side {
        transform: scale(0.5);
        transform-origin: left top;
        width: 795px;
        min-height: 1700px;
        align-self: flex-start;
    }
`;
document.head.appendChild(style);