Cách cắt/xác định phần hiển thị của phần tử (clip) bằng JavaScript

Thuộc tính clip (đã lỗi thời, thay thế bởi clip-path) xác định hình chữ nhật hiển thị của phần tử **có position: absolute/fixed**. Chỉ hoạt động trên phần tử position: absolute hoặc fixed.

Ví dụ minh họa

Mã sau cắt ảnh chỉ hiển thị vùng rect(10px, 90px, 90px, 10px) khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      position: absolute; /* BẮT BUỘC */
      top: 100px;
    }
  </style>
</head>
<body>
  <button type="button" onclick="clipImage()">Cắt ảnh (clip)</button><br>
  <img id="newImg" 
       src="https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg" 
       width="170" height="150">
  <script>
    function clipImage() {
      document.getElementById("newImg").style.clip = "rect(10px, 90px, 90px, 10px)";
      /* rect(top, right, bottom, left) - tất cả đều từ góc trên-trái của phần tử */
    }
  </script>
</body>
</html>

Cú pháp clip

clip: rect(top, right, bottom, left) | auto

• 4 giá trị: khoảng cách từ **cạnh trên, phải, dưới, trái** của phần tử (không phải từ góc).
• Đơn vị: px, %, auto.
• auto: Không cắt (mặc định).

⚠️ Clip đã lỗi thời — Dùng clip-path thay thế

clip-path mạnh hơn, hỗ trợ mọi hình dạng (hình tròn, polygon, ellipse, path SVG) và hoạt động trên mọi position.

/* Tương đương clip: rect(10px, 90px, 90px, 10px) */
el.style.clipPath = "inset(10px 80px 60px 10px)"; /* inset(top right bottom left) */

/* Hình tròn */
el.style.clipPath = "circle(50% at center)";

/* Polygon tùy chỉnh */
el.style.clipPath = "polygon(0 0, 100% 0, 100% 50%, 0 50%)";

Lưu ý: clip vẫn được hỗ trợ để tương thích ngược nhưng không nên dùng cho dự án mới.