HTML | DOM Style clip Property

Last Updated : 08 Aug, 2022

The Style clip property in HTML DOM is used to set or return the visible part of a positioned element.

Syntax:

It returns the clip property.

object.style.clip

It is used to set the clip property.

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

Note: This property has been deprecated.

Return Values: It returns a string value, which represents the part of a positioned element that is visible.

Property Values:

1. rect(top right bottom left): This value is used to clip the element in a rectangular shape. The top, right, bottom and left values are used to define the points of the rectangle.

Example-1:

html

<!DOCTYPE html>
<html>

<head>
    <title>
      DOM Style clip Property
    </title>
    <style>
        #myImage {
            position: absolute;
        }
        
        button {
            margin-top: 400px;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>DOM Style clip Property</b>
    <p>
        The clip property is used to specify 
      the part of a positioned element that is visible.
    </p>
  
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png" 
         id="myImage">
  
    <button onclick="setClip()">
      Set Clip Property
    </button>

    <!-- Script to set clip to rect() -->
    <script>
        function setClip() {
          elem = 
            document.querySelector('#myImage');
          
          elem.style.clip = 
            'rect(75px 250px 250px 75px)';
        }
    </script>
</body>

</html>

Output:

Before clicking the button:

clip-before

After clicking the button:

clip-after

2. normal: This value does not clip the element. This is the default value.

Example-2:

html

<!DOCTYPE html>
<html>

<head>
    <title>
      DOM Style clip Property
    </title>
    <style>
        #myImage {
          position: absolute;
          clip: rect(50px 200px 200px 50px);
        }
        
        button {
            margin-top: 400px;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>DOM Style clip Property</b>
    <p>
        The clip property is used to specify
        the part of a positioned element
        that is visible.
    </p>
  
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png"
         id="myImage">
  
    <button onclick="setClip()">
      Set Clip Property
    </button>

    <!-- Script to set clip to auto -->
    <script>
        function setClip() {
            elem = 
              document.querySelector('#myImage');
          
            elem.style.clip = 'auto';
        }
    </script>
</body>

</html>

Output:

Before clicking the button:

normal-before

After clicking the button:

normal-after

3. initial: This is used to set this property to its default value.

Example-3:

html

<!DOCTYPE html>
<html>

<head>
    <title>
      DOM Style clip Property
    </title>
   
    <style>
        #myImage {
          position: absolute;
          clip: rect(75px 300px 300px 75px);
        }
        
        button {
            margin-top: 400px;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style clip Property
    </b>
    <p>
        The clip property is used to specify
        the part of a positioned element 
        that is visible.
    </p>
  
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png"
         id="myImage">
  
    <button onclick="setClip()">
      Set Clip Property
    </button>

    <!-- Script to set clip to initial -->
    <script>
        function setClip() {
            elem = 
              document.querySelector(
              '#myImage');
          
            elem.style.clip = 'initial';
        }
    </script>
</body>

</html>

Output:

Before clicking the button:

initial-before

After clicking the button:

initial-after

4. inherit: This inherits the property from its parent.

Example-4:

html

<!DOCTYPE html>
<html>

<head>
    <title>
      DOM Style clip Property
    </title>
    
    <style>
     #parent {
        clip: rect(75px 300px 300px 75px);
      }
        
        #myImage {
            position: absolute;
        }
        
        button {
            margin-top: 400px;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
  
    <b>DOM Style clip Property</b>
    <p>
        The clip property is used to specify
      the part of a positioned element that 
      is visible.
    </p>
  
    <div id="parent">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png" 
             id="myImage">
    </div>
    <button onclick="setClip()">
      Set Clip Property
    </button>

    <!-- Script to set clip to inherit -->
    <script> 
      function setClip() {
        elem = 
          document.querySelector(
          '#myImage');
        
        elem.style.clip = 'inherit';
        }
    </script>
</body>

</html>