คุณสมบัติเคอร์เซอร์ HTML DOM Style ใช้สำหรับการตั้งค่าหรือรับประเภทเคอร์เซอร์ขณะแสดงตัวชี้เมาส์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติเคอร์เซอร์ -
object.style.cursor=value
ตารางต่อไปนี้แสดงให้เห็นถึงค่า
| ค่า | คำอธิบาย |
|---|---|
| นามแฝง | Thecursor ระบุว่ามีการสร้างนามแฝงของบางสิ่งขึ้น |
| all-scroll | Thecursor ระบุว่าสิ่งที่สามารถเลื่อนไปในทิศทางใดก็ได้ |
| อัตโนมัติ | ค่าเริ่มต้นเบราว์เซอร์ตั้งค่าเคอร์เซอร์ |
| เซลล์ | เคอร์เซอร์ระบุว่าเซลล์ (หรือชุดของเซลล์) สามารถเลือกได้ |
| context-menu | เคอร์เซอร์ระบุว่ามีเมนูบริบทให้ใช้งาน |
| col-resize | เคอร์เซอร์ระบุว่าคอลัมน์สามารถปรับขนาดในแนวนอนได้ |
| คัดลอก | เคอร์เซอร์ระบุว่ามีบางสิ่งที่จะคัดลอก |
| เป้า | เคอร์เซอร์แสดงผลเป็นเป้า |
| ค่าเริ่มต้น | เคอร์เซอร์เริ่มต้น |
| e-resize | Thecursor ระบุว่าขอบของกล่องจะถูกเลื่อนไปทางขวา (ตะวันออก) |
| ew-resize | ระบุเคอร์เซอร์ปรับขนาดแบบสองทิศทาง |
| grab | Thecursor ระบุว่าบางสิ่งสามารถคว้ามาได้ |
| โลภ | Thecursor ระบุว่าบางสิ่งสามารถคว้ามาได้ |
| ช่วยเหลือ | เคอร์เซอร์ระบุว่ามีความช่วยเหลืออยู่ |
| ย้าย | เคอร์เซอร์ระบุว่ามีบางสิ่งที่จะย้าย |
| n-resize | Thecursor ระบุว่าขอบของกล่องจะถูกเลื่อนขึ้น (เหนือ) |
| ne-resize | เคอร์เซอร์ระบุว่าขอบของกล่องจะถูกเลื่อนขึ้นและไปทางขวา (เหนือ/ตะวันออก) |
| nesw-resize | ระบุเคอร์เซอร์ปรับขนาดแบบสองทิศทาง |
| ns-resize | ระบุเคอร์เซอร์ปรับขนาดแบบสองทิศทาง |
| nw-resize | เคอร์เซอร์ระบุว่าขอบของกล่องจะถูกเลื่อนขึ้นและไปทางซ้าย (เหนือ/ตะวันตก) |
| nwse-resize | ระบุเคอร์เซอร์ปรับขนาดแบบสองทิศทาง |
| ไม่ดร็อป | เคอร์เซอร์ระบุว่ารายการที่ลากไม่สามารถวางที่นี่ได้ |
| ไม่มี | ไม่มีการแสดงเคอร์เซอร์สำหรับองค์ประกอบ |
| ไม่อนุญาต | เคอร์เซอร์ระบุว่าการดำเนินการที่ร้องขอจะไม่ถูกดำเนินการ |
| ตัวชี้ | เคอร์เซอร์เป็นตัวชี้และระบุลิงก์ |
| ความคืบหน้า | เคอร์เซอร์แสดงว่าโปรแกรมไม่ว่าง (อยู่ระหว่างดำเนินการ) |
| row-resize | เคอร์เซอร์ระบุว่าสามารถปรับขนาดแถวในแนวตั้งได้ |
| s-resize | Thecursor ระบุว่าขอบของกล่องจะถูกเลื่อนลง (ทางใต้) |
| se-resize | Thecursor ระบุว่าขอบของกล่องจะถูกเลื่อนลงไปทางขวา (ใต้/ตะวันออก) |
| sw-resize | Thecursor ระบุว่าขอบของกล่องจะถูกเลื่อนลงและไปทางซ้าย (ใต้/ตะวันตก) |
| ข้อความ | เคอร์เซอร์ระบุข้อความที่เลือกได้ |
| URL | รายการ URL ที่คั่นด้วยเครื่องหมายจุลภาคไปยังเคอร์เซอร์ที่กำหนดเอง หมายเหตุ:ระบุเคอร์เซอร์ทั่วไปที่ส่วนท้ายของรายการเสมอ ในกรณีที่ไม่สามารถใช้เคอร์เซอร์ที่กำหนด URL ได้ |
| vertical-text | เคอร์เซอร์ระบุข้อความแนวตั้งที่สามารถเลือกได้ |
| w-resize | Thecursor ระบุว่าขอบของกล่องจะถูกเลื่อนไปทางซ้าย (ตะวันตก) |
| รอ | เคอร์เซอร์แสดงว่าโปรแกรมไม่ว่าง |
| ซูมเข้า | Thecursor ระบุว่าบางสิ่งสามารถซูมเข้าได้ |
| ซูมออก | เคอร์เซอร์ระบุว่าสามารถซูมออกได้ |
| ค่าเริ่มต้น | ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
| สืบทอด | รับช่วงคุณสมบัตินี้จากองค์ประกอบหลัก |
เรามาดูตัวอย่างคุณสมบัติของเคอร์เซอร์กัน −
ตัวอย่าง
<!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> ผลลัพธ์
เมื่อคลิกปุ่ม “เปลี่ยนเคอร์เซอร์ ปุ่ม ” เคอร์เซอร์เปลี่ยนไปและจะมองเห็นได้ในภาพหน้าจอด้านล่าง -
