Thuộc tính clip trong HTML DOM Style

Thuộc tính clip trong HTML DOM Style dùng để thiết lập hoặc lấy phần hiển thị của phần tử được định vị (positioned element). Lưu ý: clip đã bị deprecated, thay thế bằng clip-path.

Cú pháp

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

Giá trị tham số

Giá trị	Mô tả
auto	Không cắt xén (mặc định)
rect(top right bottom left)	Cắt hình chữ nhật theo 4 tọa độ (top, right, bottom, left)
initial	Giá trị mặc định
inherit	Kế thừa từ phần tử cha

Ví dụ minh họa

<!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 = "Thuộc tính clip của hình ảnh đã thay đổi";
  }
</script>
</head>
<body>
<div>
  <img id="IMG1" src="https://www.tutorialspoint.com/hibernate/images/hibernate-mini-logo.jpg">
  <p id="P1">Thay đổi clip property của hình ảnh bằng cách nhấn nút dưới đây</p>
  <button onclick="changeClip()">Thay đổi Clip</button>
  <p id="Sample"></p>
</div>
</body>
</html>

Kết quả

Hình ảnh ban đầu hiển thị đầy đủ 200x200px. Sau khi nhấn nút, chỉ hiển thị vùng rect(0, 75, 75, 0) — góc trên trái 75x75px.

Quan trọng: clip chỉ hoạt động trên phần tử có position: absolute hoặc fixed. Hiện nay nên dùng clip-path (hỗ trợ hình tròn, polygon, SVG...).