HTML Style clip用法及代码示例

HTML DOM中的样式剪辑属性用于设置或返回已定位元素的可见部分。

用法:

它返回clip属性。
```
object.style.clip
```

用于设置clip属性。

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

属性值：

rect(top right bottom left):该值用于将元素裁剪为矩形。顶部，右侧，底部和左侧的值用于定义矩形的点。

示例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>

输出：

在单击按钮之前：
clip-before

单击按钮后：
clip-after

normal:此值不会裁剪元素。这是默认值。

示例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>

输出：

在单击按钮之前：
normal-before

单击按钮后：
normal-after

initial:这用于将此属性设置为其默认值。

示例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>

输出：

在单击按钮之前：
initial-before

单击按钮后：
initial-after

inherit:这将从其父项继承该属性。
示例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>

输出：

在单击按钮之前：
inherit-before

单击按钮后：
inherit-after

支持的浏览器：DOM样式剪辑属性支持的浏览器如下：

谷歌浏览器
IE浏览器
Firefox
Opera
苹果Safari

相关用法

注：本文由纯净天空筛选整理自sayantanm19大神的英文原创作品 HTML | DOM Style clip Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。