HTML | DOM 样式剪辑属性

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

句法：

• 它返回剪辑属性。

  object.style.clip

• 它用于设置剪辑属性。

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

属性值：

• rect(左上右下)：该值用于将元素裁剪为矩形。 top、right、bottom 和 left 值用于定义矩形的点。

  示例 1：

    
  
      
        DOM Style clip Property
      
      
          #myImage {
              position: absolute;
          }
            
          button {
              margin-top: 400px;
          }
      
  
    
  
      
        GeeksforGeeks
      
      DOM Style clip Property
      
          The clip property is used to specify 
        the part of a positioned element that is visible.
      
      
      
      
      
        Set Clip Property
      
    
      
      
          function setClip() {
            elem = 
              document.querySelector('#myImage');
              
            elem.style.clip = 
              'rect(75px 250px 250px 75px)';
          }
      
  
    

  输出：

  点击按钮前：
  

  点击按钮后：
  

• normal：该值不会裁剪元素。这是默认值。

  示例 2：

    
  
      
        DOM Style clip Property
      
      
          #myImage {
            position: absolute;
            clip: rect(50px 200px 200px 50px);
          }
            
          button {
              margin-top: 400px;
          }
      
  
    
  
      
        GeeksforGeeks
      
      DOM Style clip Property
      
          The clip property is used to specify
          the part of a positioned element
          that is visible.
      
      
      
      
      
        Set Clip Property
      
    
      
      
          function setClip() {
              elem = 
                document.querySelector('#myImage');
              
              elem.style.clip = 'auto';
          }
      
  
    

  输出：

  点击按钮前：
  

  点击按钮后：
  

• 初始值：用于将此属性设置为其默认值。

  示例 3：

    
  
      
        DOM Style clip Property
      
       
      
          #myImage {
            position: absolute;
            clip: rect(75px 300px 300px 75px);
          }
            
          button {
              margin-top: 400px;
          }
      
  
    
  
      
        GeeksforGeeks
      
      
        DOM Style clip Property
      
      
          The clip property is used to specify
          the part of a positioned element 
          that is visible.
      
      
      
      
      
        Set Clip Property
      
    
      
      
          function setClip() {
              elem = 
                document.querySelector(
                '#myImage');
              
              elem.style.clip = 'initial';
          }
      
  
    

  输出：

  点击按钮前：
  

  点击按钮后：
  

• 继承：这从其父级继承属性。
  示例 4：

    
  
      
        DOM Style clip Property
      
        
      
       #parent {
          clip: rect(75px 300px 300px 75px);
        }
            
          #myImage {
              position: absolute;
          }
            
          button {
              margin-top: 400px;
          }
      
  
    
  
      
        GeeksforGeeks
      
      
      DOM Style clip Property
      
          The clip property is used to specify
        the part of a positioned element that 
        is visible.
      
      
      
          
      
      
        Set Clip Property
      
    
      
       
        function setClip() {
          elem = 
            document.querySelector(
            '#myImage');
            
          elem.style.clip = 'inherit';
          }
      
  
    

  输出：

  点击按钮前：
  

  点击按钮后：
  

支持的浏览器： DOM Style clip属性支持的浏览器如下：

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果Safari