Skip to content
Related Articles

Related Articles

HTML | DOM Style clip Property
  • Last Updated : 31 Jul, 2019

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"

Property Values:

  • 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:




    <!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

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

    Example-2:




    <!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

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

    Example-3:




    <!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

  • inherit: This inherits the property from its parent.
    Example-4:




    <!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 :