Thuộc tính con trỏ HTML DOM Style được sử dụng để thiết lập hoặc nhận loại con trỏ trong khi hiển thị con trỏ chuột.
Sau đây là cú pháp cho -
Đặt thuộc tính con trỏ -
object.style.cursor=value
Bảng sau minh họa giá trị
| Giá trị | Mô tả |
|---|---|
| bí danh | Con trỏ cho biết bí danh của thứ gì đó sẽ được tạo |
| cuộn hết | Con trỏ chỉ ra rằng thứ gì đó có thể được cuộn theo bất kỳ hướng nào |
| tự động | Mặc định Trình duyệt đặt con trỏ |
| ô | Con trỏ chỉ ra rằng một ô (hoặc tập hợp các ô) có thể được chọn |
| context-menu | Con trỏ chỉ ra rằng menu ngữ cảnh có sẵn |
| col-resize | Con trỏ chỉ ra rằng cột có thể được thay đổi kích thước theo chiều ngang |
| sao chép | Con trỏ cho biết thứ gì đó sẽ được sao chép |
| crosshair | Con trỏ hiển thị dưới dạng hình chữ thập |
| mặc định | Con trỏ mặc định |
| thay đổi kích thước điện tử | Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển sang phải (phía đông) |
| ew-resize | Cho biết con trỏ thay đổi kích thước hai chiều |
| lấy | Con trỏ chỉ ra rằng có thể lấy được thứ gì đó |
| nắm bắt | Con trỏ chỉ ra rằng có thể lấy được thứ gì đó |
| trợ giúp | Con trỏ cho biết có trợ giúp |
| di chuyển | Con trỏ cho biết thứ gì đó sẽ được di chuyển |
| n-thay đổi kích thước | Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển lên trên (phía bắc) |
| ne-thay đổi kích thước | Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển lên trên và sang phải (bắc / đông) |
| nesw-resize | Cho biết con trỏ thay đổi kích thước hai chiều |
| ns-resize | Cho biết con trỏ thay đổi kích thước hai chiều |
| nw-resize | Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển lên và sang trái (bắc / tây) |
| nwse-resize | Cho biết con trỏ thay đổi kích thước hai chiều |
| no-drop | Con trỏ cho biết rằng không thể thả mục được kéo ở đây |
| không có | Con trỏ được hiển thị cho phần tử |
| không được phép | Con trỏ chỉ ra rằng hành động được yêu cầu sẽ không được thực hiện |
| con trỏ | Con trỏ là một con trỏ và chỉ ra một liên kết |
| tiến trình | Con trỏ chỉ ra rằng chương trình đang bận (đang xử lý) |
| row-resize | Con trỏ chỉ ra rằng hàng có thể được thay đổi kích thước theo chiều dọc |
| s-thay đổi kích thước | Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển xuống (phía nam) |
| thay đổi kích thước | Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển xuống dưới và sang phải (nam / đông) |
| thay đổi kích thước sw | Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển xuống và sang trái (nam / tây) |
| văn bản | Con trỏ cho biết văn bản có thể được chọn |
| URL | Danh sách URL được phân tách bằng acomma thành con trỏ tùy chỉnh. Lưu ý:Luôn chỉ định một con trỏ chung ở cuối danh sách, trong trường hợp không có con trỏ nào được xác định bởi URL có thể được sử dụng |
| vertical-text | Con trỏ cho biết văn bản dọc có thể được chọn |
| w-thay đổi kích thước | Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển sang trái (phía Tây) |
| đợi | Con trỏ chỉ ra rằng chương trình đang bận |
| phóng to | Con trỏ chỉ ra rằng có thể phóng to thứ gì đó |
| thu nhỏ | Con trỏ cho biết có thể thu nhỏ thứ gì đó |
| tên ban đầu | Đặt thuộc tính này thành giá trị mặc định. |
| kế thừa | Kế thừa thuộc tính này từ phần tử mẹ của nó. |
Chúng ta hãy xem một ví dụ cho thuộc tính con trỏ -
Ví dụ
<!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="Hover over the first paragraph to see cursor change to cell and on second to see it change to grab icon";
}
</script>
</head>
<body>
<p id="one">This is some sample text inside first paragraph.This is some sample text inside first paragraph.This is some sample text inside first paragraph.This is some sample text inside first paragraph.</p>
<p id="two">This is some sample text inside second paragraph.This is some sample text inside second paragraph.This is some sample text inside second paragraph.This is some sample text inside second paragraph.</p>
<p>Change the cursor property by clicking the below button</p>
<button onclick="changeCursor()">Change Cursor</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Khi nhấp vào “ Thay đổi con trỏ ”, Con trỏ đã thay đổi và con trỏ tương tự được hiển thị trong ảnh chụp màn hình bên dưới -
