HTML - DOM Style Object clip Property

Quiz

HTML DOM Style Object clip property is used to set or get the visible part of a positioned element.

Syntax

Set the clip property

object.style.clip= "auto | rect(top right bottom left) | initial | inherit";

Get the clip property

object.style.clip;

Property Values

Value	Description
auto	It is the default value which represents no clipping of element.
rect(top right bottom left)	It clips the element in a rectangular shape according to the given four coordinates.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents part of positioned element which is visible.

Example of HTML DOM Style Object 'clip' Property

The following example clips and unclips the specified part.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object clip Property
    </title>
    <style>
        #clip {
            position: absolute;
        }
    </style>
</head>
<body>
    <button onclick="fun()">Clip</button>
    <button onclick="funTwo()">Unclip</button>
    <br><br>
    <img src="/html/images/test.png" id="clip">
    <script>
        function fun() {
            document.getElementById("clip")
                .style.clip = "rect(0px 150px 150px 0px)";
        }
        function funTwo() {
            document.getElementById("clip")
                .style.clip = "auto";
        }
    </script>
</body>
</html>

Supported Browsers

Property
clip	Yes 1	Yes 12	Yes 1	Yes 1	Yes 9

html_dom.htm

Print Page