Thuộc tính HTML DOM style clip được sử dụng để thiết lập hoặc hiển thị phần tử được định vị.
Sau đây là cú pháp cho -
Đặt thuộc tính clip -
object.style.clip = "auto|rect(top right bottom left)|initial|inherit"
Các thuộc tính trên được giải thích như sau -
| Giá trị | Mô tả |
|---|---|
| auto | Phần tử không cắt và đây là giá trị mặc định. |
| direct (trên cùng bên phải dưới cùng bên trái) | Nó cắt hình dạng theo bốn tọa độ đã cho. |
| đầu tiên | Để đặt thuộc tính này thành giá trị ban đầu. |
| kế thừa | Để kế thừa giá trị thuộc tính mẹ |
Chúng ta hãy xem một ví dụ về thuộc tính clip -
Ví dụ
<!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.tutorialspoint.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> Đầu ra
Khi nhấp vào “Thay đổi Clip” nút -
