คุณสมบัติคลิปสไตล์ HTML DOM ใช้สำหรับการตั้งค่าหรือรับองค์ประกอบตำแหน่งที่มองเห็นได้
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติของคลิป −
object.style.clip = "auto|rect(top right bottom left)|initial|inherit"
อธิบายคุณสมบัติข้างต้นดังนี้ −
| ค่า | คำอธิบาย |
|---|---|
| อัตโนมัติ | องค์ประกอบไม่ตัดและนี่คือค่าเริ่มต้น |
| rect(บนขวาล่างซ้าย) | คลิปรูปร่างตามสี่พิกัดที่กำหนด |
| ค่าเริ่มต้น | สำหรับการตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
| สืบทอด | การสืบทอดค่าคุณสมบัติหลัก |
เรามาดูตัวอย่างคุณสมบัติของคลิปกัน −
ตัวอย่าง
<!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> ผลลัพธ์
เมื่อคลิก “เปลี่ยนคลิป” ปุ่ม −
