Skip to content
Related Articles

Related Articles

HTML | DOM Style clip Property

View Discussion
Improve Article
Save Article
  • 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=
         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=
         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=
         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=
             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>

Output: 

Before clicking the button:

 inherit-before 

After clicking the button:

 inherit-after

Supported Browsers: The browser supported by DOM Style clip property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Apple Safari

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!