Thuộc tính cursor trong HTML DOM Style dùng để thiết lập hoặc lấy kiểu con trỏ chuột khi di chuột qua phần tử.
Cú pháp
object.style.cursor = value
Các giá trị con trỏ phổ biến
| Giá trị | Mô tả |
|---|---|
| auto | Mặc định, trình duyệt tự quyết định |
| default | Con trỏ mặc định (mũi tên) |
| pointer | Bàn tay chỉ (link, button) |
| text | Con trỏ nhập văn bản (I-beam) |
| wait | Vòng tròn loading (chương trình bận) |
| progress | Loading nhưng vẫn tương tác được |
| crosshair | Ten chữ (chọn điểm chính xác) |
| move | Di chuyển (4 mũi tên) |
| grab / grabbing | Cúi tay nắm / đang nắm (drag & drop) |
| e-resize, w-resize, n-resize, s-resize | Thay đổi kích thước theo hướng |
| ew-resize, ns-resize, nesw-resize, nwse-resize | Thay đổi kích thước 2 chiều |
| col-resize / row-resize | Resize cột/hàng bảng |
| zoom-in / zoom-out | Phóng to / thu nhỏ |
| not-allowed | Dấu cấm (không drop được) |
| no-drop | Tương tự not-allowed |
| help | Dấu hỏi (trợ giúp) |
| cell | Chọn ô (table) |
| context-menu | Menu ngữ cảnh khả dụng |
| alias | Tạo alias/shortcut |
| copy | Sao chép (có dấu +) |
| none | Ẩn con trỏ |
| url(...), auto | Con trỏ tùy chỉnh (fallback về auto) |
| initial / inherit | Giá trị mặc định / kế thừa |
Ví dụ minh họa
<!DOCTYPE html>
<html>
<head>
<style>
#one { background-color: beige; }
#two { background-color: lavender; }
</style>
<script>
function changeCursor() {
document.getElementById("one").style.cursor = "cell";
document.getElementById("two").style.cursor = "grab";
document.getElementById("Sample").innerHTML = "Di chuột qua đoạn 1 thấy cursor cell, đoạn 2 thấy grab";
}
</script>
</head>
<body>
<p id="one">Đoạn văn thứ nhất. Di chuột qua đây để thấy con trỏ cell.</p>
<p id="two">Đoạn văn thứ hai. Di chuột qua đây để thấy con trỏ grab.</p>
<p>Thay đổi cursor property bằng cách nhấn nút dưới đây</p>
<button onclick="changeCursor()">Thay đổi Cursor</button>
<p id="Sample"></p>
</body>
</html>
Kết quả
Sau khi nhấn nút, di chuột qua đoạn 1 thấy con trỏ cell (dấu +), đoạn 2 thấy grab (bàn tay nắm).