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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。