HTML | Propiedad de clip de estilo DOM

La propiedad Style clip en HTML DOM se usa para establecer o devolver la parte visible de un elemento posicionado.

Sintaxis:

Devuelve la propiedad del clip.
```
object.style.clip
```

Se utiliza para establecer la propiedad del clip.

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

Valores devueltos: Devuelve un valor de string, que representa la parte de un elemento posicionado que es visible.

Valores de propiedad:

rect (arriba a la derecha, abajo a la izquierda): este valor se usa para recortar el elemento en una forma rectangular. Los valores superior, derecho, inferior e izquierdo se utilizan para definir los puntos del rectángulo.

Ejemplo 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=
"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>

Producción:

Antes de hacer clic en el botón:
clip-before

Después de hacer clic en el botón:
clip-after

normal: este valor no recorta el elemento. Este es el valor predeterminado.

Ejemplo-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=
"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>

Producción:

Antes de hacer clic en el botón:
normal-before

Después de hacer clic en el botón:
normal-after

initial: se utiliza para establecer esta propiedad en su valor predeterminado.

Ejemplo-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=
"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>

Producción:

Antes de hacer clic en el botón:
initial-before

Después de hacer clic en el botón:
initial-after

heredar: Esto hereda la propiedad de su padre.
Ejemplo-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=
"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>

Producción:

Antes de hacer clic en el botón:
inherit-before

Después de hacer clic en el botón:
inherit-after

Navegadores compatibles: los navegadores compatibles con la propiedad de clip DOM Style se enumeran a continuación:

Google Chrome
explorador de Internet
Firefox
Ópera
safari de manzana

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta