HTML DOM 样式 clip 属性

htmlweb developmentfront end technology更新于 2025/7/23 12:28:17

HTML DOM 样式 clip 属性用于设置或获取定位元素的可见部分。

以下是语法 −

设置 clip 属性 −

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

以上属性解释如下 −

值	描述
auto	该元素不裁剪，这是默认值。
rect(top right bottom left)	根据给定的四个坐标裁剪形状。
initial	用于将此属性设置为初始值。
inherit	用于继承父级属性值

让我们来看一个 clip 属性的示例 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
   div{
      position:relative;
   }
   #IMG1{
      width:200px;
      height:200px;
      position:absolute;
   }
   #P1{
      position:absolute;
      margin-top:210px;
   }
   button{
      margin-top: 250px;
   }
</style>
<script>
   function changeClip(){
      document.getElementById("IMG1").style.clip="rect(0px 75px 75px 0px)";
      document.getElementById("Sample").innerHTML="The image clip property is changed now ";
   }
</script>
</head>
<body>
   <div >
      <img id="IMG1" src="https://www.cainiaomax.com/hibernate/images/hibernate-mini-logo.jpg">
      <p id="P1">Change the above image clip property by clicking the below button</p>
      <button onclick="changeClip()">Change Clip</button>
      <p id="Sample"></p>
   </div>
</body>
</html>