In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > zoom

zoom style property

Browser support:

Specifies or returns the zoom level of the element's content.

There isn't any similar property in Firefox and Opera. Only the size of text can be changed with the fontSize property.

Syntax:

object.zoom;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: zoom

Possible values:

The type of this property is string.

One of the following values:

level (floating-point)

Floating-point number, the zoom level.

normal

Default. No magnification is applied. Same as 1.0.

zoom level in percentage

The zoom level is the specified percentage of the magnification scale. The 100% is the normal zoom level.

Default: normal.

Example HTML code 1:

This example illustrates the use of the zoom property:

<head>
    <style>
        .zoom50 {
            zoom: 50%;
            background-color: #00F9F9;
            width: 80px;
            height: 80px;
        }
        .zoom100 {
            zoom: 100%;
            background-color: #00F9F9;
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
    <div class="zoom50">zoom 50%</div>
    <div class="zoom100">zoom 100%</div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the zoom property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeZoom (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var indexValue = selectTag.options[whichSelected].text;

            var div = document.getElementById ("myDiv");

            if ('zoom' in div.style) {
                div.style.zoom = indexValue;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div id="myDiv">zoom this element</div>

    <br />
    Change the zoom property:
    <select size="6" onchange="ChangeZoom (this);">
        <option />10%
        <option />30%
        <option />70%
        <option selected="selected" />100%
        <option />150%
        <option />200%
    </select>
</body>