Properti Cursor Style DOM HTML dan Fungsinya

Properti cursor Style DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan tipe cursor untuk ditampilkan pada pointer mouse.

Sebelum memahami lebih dalam materi tentang Properti Cursor Style DOM HTML dan Fungsinya, terlebih dahulu pelajari materi tentang: Mereset Penghitungan HTML Menggunakan counterReset Style DOM, Menghitung Inkrementasi HTML Menggunakan counterIncrement Style DOM, dan Menggabungkan Kolom HTML Menggunakan columnSpan Style DOM.

Sintak:

• Digunakan untuk mengembalikan properti cursor: object.style.cursor
• Digunakan untuk mengatur nilai properti cursor: object.style.cursor = value

Property Values:

• alias: Digunakan untuk menampilkan suatu indikasi dari cursor yang akan diciptakan.
• all-scroll: Digunakan untuk memberikan indikasi scroll.
• auto: Merupakan nilai default dari properti cursor yang berfungsi untuk mengatur cursor browser.
• cell: Digunakan untuk mengindikasikan cursor sebuah sel atau sekelompok sel yang diseleksi.
• context-menu: Digunakan untuk mengindikasikan cursor bahwa sebuah konteks menu telah tersedia.
• col-resize: Digunakan untuk mengindikasikan cursor bahwa kolom dapat dilakukan resized secara horizontal.
• copy: Digunakan untuk mengindikasikan cursor tentang suatu hal yang akan dilakukan proses copy.
• crosshair: Digunakan untuk render cursor seperti sebuah crosshair.
• default: default cursor.
• e-resize: Digunakan untuk mengindikasikan tepian dari box yang akan digerakkan ke kanan.
• ew-resize: Digunakan untuk mengindikasikan cursor sebuah bidirectional resize cursor.
• help: Digunakan untuk mengindikasikan bahwa informasi petunjuk telah tersedia.
• move: Digunakan untuk mengindikasikan sesuai yang akan digerakkan.
• n-resize: Digunakan untuk mengindikasikan tepian dari box yang akan digerakkan ke arah atas.
• ne-resize: Digunakan untuk mengindikasikan tepian box yang akan digerakkan ke atas kanan.
• nesw-resize: Digunakan untuk mengindikasikan resize cursor bidirectional.
• ns-resize: Digunakan untuk mengindikasikan resize cursor bidirectional.
• nw-resize: Digunakan untuk mengindikasikan tepian kotak cursor yang akan digerakkan ke atas kiri.
• nwse-resize: Digunakan untuk mengindikasikan sebuah resize cursor bidirectional.
• no-drop: Digunakan untuk mengindikasikan cursor bahwa item yang di-drag tidak dapat dilakukan drop pada bagian tersebut.
• none: Digunakan untuk mengindikasikan cursor yang tidak dilakukan render untuk elemen tertentu.
• not-allowed: Digunakan untuk mengindikasikan cursor bahwa aksi yang di-requested tidak akan dieksekusi.
• pointer: Digunakan untuk mengindikasikan bahwa cursor adalah sebuah pointer dan link.
• progress: Digunakan untuk mengindikasikan cursor bahwa program sedang sibuk.
• row-resize: Digunakan untuk mengindikasikan bahwa baris dapat dilakukan resize secara vertikal.
• s-resize: Digunakan untuk mengindikasikan bahwa tepian box akan digerakkan ke arah bawah.
• se-resize: Digunakan untuk mengindikasikan cursor bahwa tepian kotaknya akan digerakkan ke bawah kanan.
• sw-resize: Digunakan untuk mengindikasikan cursor bahwa tipian kotaknya akan digerakkan ke bawah kiri.
• text: Digunakan untuk mengindikasikan cursor bawah teks kemungkinan diseleksi.
• URL: Digunakan sebuah tanda koma untuk memisahkan daftar dari URL ke cursor kostumisasi dan cursor umum pada bagian akhir dari daftar.
• vertical-text: Digunakan untuk mengindikasikan cursor bahwa teks vertikal mungkin akan diseleksi.
• w-resize: Digunakan untuk mengindikasikan cursor bahwa tepian dari box akan digerakkan ke kiri.
• wait: Digunakan untuk mengindikasikan cursor bahwa program sedang sibuk.
• zoom-in: Digunakan untuk mengindikasikan cursor bahwa suatu elemen dapat dilakukan zoom in.
• zoom-out: Digunakan untuk mengindikasikan cursor bahwa suatu elemen dapat dilakukan zoom out.
• initial: Digunakan untuk mengatur nilai properti ke nilai default-nya.
• inherit: Digunakan untuk menerima nilai turunan dari elemen parent.

Return Values: Digunakan untuk mengembalikan sebuah nilai string, dimana value merepresentasikan nilai tampilan cursor ketika pointer mouse sedang digerakkan ke elemen tertentu.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style cursor DOM

</title>

 

<style>

.wait 

{

cursor: wait;

}

 

h1 

{

color: green;

}

</style>

 

</head>

 

<body>

<center>

 

<h1>

Blog Elfan

</h1>

 

<p id="myP">

Gerakkan mouse ke teks sebelum 

dan sesudah dilakukan klik 

pada tombol berikut!

</p>

 

<button 

type="button"

onclick="myFunction()">

Change cursor

</button>

 

<script>

function myFunction() 

{

document.getElementById(

"myP").style.cursor = "pointer";

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

Gerakkan mouse ke teks sebelum dan sesudah dilakukan klik pada tombol berikut!

Properti kursor pada elemen dalam HTML adalah bagian dari pengaturan tampilan elemen-elemen pada halaman web yang memungkinkan pengguna untuk merasakan interaksi dengan elemen-elemen tersebut melalui pergerakan kursor. Kursor adalah indikator visual yang menunjukkan posisi di layar perangkat saat pengguna berinteraksi dengan elemen dalam halaman web. Dalam desain antarmuka, properti kursor sangat penting karena dapat memberikan petunjuk tentang jenis interaksi yang diinginkan oleh pengguna, seperti apakah suatu elemen dapat diklik, diseret, atau berfungsi dalam cara lain. 

Fungsi utama dari properti kursor adalah untuk meningkatkan pengalaman pengguna dengan memberikan umpan balik visual yang jelas mengenai apa yang dapat dilakukan dengan elemen tersebut. Setiap jenis kursor memberi tahu pengguna jenis aksi yang dapat dilakukan pada elemen tersebut. Misalnya, kursor berupa panah biasanya menandakan bahwa elemen tersebut bisa dipilih atau berfungsi sebagai indikator posisi standar. Di sisi lain, kursor berbentuk tangan menunjukkan bahwa elemen tersebut dapat diklik, seperti link atau tombol.

Selain itu, properti kursor juga sangat berguna dalam menciptakan antarmuka yang intuitif. Dengan menggunakan kursor yang sesuai dengan konteks elemen, pengguna dapat lebih mudah memahami dan berinteraksi dengan halaman web. Beberapa jenis kursor yang biasa digunakan antara lain kursor panah standar, kursor tangan untuk elemen yang dapat diklik, kursor silang untuk area yang membutuhkan pemilihan presisi, dan banyak lagi. Masing-masing jenis kursor ini dirancang untuk memberikan petunjuk yang jelas mengenai jenis interaksi yang dapat dilakukan.

Pengaturan kursor juga dapat disesuaikan untuk memberikan pengalaman pengguna yang lebih baik pada halaman web. Dalam beberapa kasus, pengembang web mungkin ingin mengganti kursor default dengan bentuk kursor khusus untuk tujuan tertentu. Misalnya, pada elemen yang dapat diseret, kursor dapat diubah menjadi kursor dengan bentuk panah ganda untuk menunjukkan bahwa elemen tersebut dapat dipindahkan. Hal ini penting untuk memastikan bahwa pengguna merasa jelas dan mudah dalam melakukan interaksi dengan halaman web.

Baca Juga:

• 4 Value Properti Direction Style DOM pada HTML
• 22 Value Properti Display Style DOM pada HTML
• 4 Value Properti emptyCells Style DOM pada HTML
• 16 Value Properti Filter Style DOM pada HTML

Properti kursor tidak hanya terbatas pada perubahan bentuk kursor saat berada di atas elemen tertentu. Penggunaan kursor juga dapat mempengaruhi berbagai interaksi yang terjadi pada halaman, seperti saat pengguna melakukan klik, seret, atau bahkan saat melakukan hover pada elemen-elemen tertentu. Dengan begitu, peran kursor dalam desain antarmuka sangat vital dalam membimbing pengguna dalam navigasi halaman web.

Selain itu, dalam pengaturan kursor pada halaman web, pengembang juga bisa mengatur kursor berdasarkan keadaan elemen. Misalnya, jika elemen sedang dinonaktifkan atau tidak dapat diakses, kursor dapat diubah menjadi bentuk yang mengindikasikan bahwa elemen tersebut tidak dapat diklik, seperti kursor berbentuk lingkaran dengan garis diagonal melintang. Ini memberikan petunjuk visual yang sangat berguna agar pengguna tidak membuang waktu mencoba berinteraksi dengan elemen yang tidak tersedia.

Penggunaan properti kursor yang efektif dapat membantu menciptakan antarmuka yang lebih ramah pengguna dan memudahkan navigasi dalam halaman web. Properti ini memberikan kendali bagi pengembang untuk menyampaikan pesan visual yang jelas kepada pengguna mengenai cara berinteraksi dengan elemen-elemen pada halaman. Ini sangat penting dalam memastikan bahwa pengguna dapat berinteraksi dengan halaman web dengan cara yang cepat dan tanpa kebingungannya.

Seiring berkembangnya teknologi dan desain web, penggunaan properti kursor menjadi semakin beragam. Dalam beberapa tahun terakhir, kursor juga digunakan dalam elemen interaktif seperti animasi atau elemen yang dapat dipindahkan. Properti kursor memungkinkan untuk menciptakan elemen-elemen yang lebih dinamis, dimana bentuk kursor dapat berubah berdasarkan tindakan yang dilakukan oleh pengguna. Hal ini dapat meningkatkan kenyamanan dan pengalaman pengguna secara keseluruhan.

Dengan demikian, properti kursor pada HTML tidak hanya berfungsi sebagai penunjuk posisi di layar, tetapi juga sebagai alat untuk memberikan umpan balik visual yang jelas mengenai kemungkinan interaksi pada elemen-elemen di halaman web. Properti ini membantu pengguna untuk lebih mudah memahami apa yang dapat dilakukan di halaman web dan menghindari kebingungannya dalam berinteraksi dengan elemen-elemen tersebut. Penggunaan kursor yang tepat dan disesuaikan dengan konteks elemen akan memberikan pengalaman yang lebih baik dan intuitif bagi pengguna halaman web.

Melanjutkan pembahasan mengenai properti kursor pada HTML, penting untuk memahami lebih lanjut bagaimana kursor dapat disesuaikan sesuai dengan konteks penggunaan dan jenis elemen yang terlibat. Properti kursor memiliki pengaruh besar terhadap cara pengguna berinteraksi dengan antarmuka halaman web, sehingga pemahaman mendalam tentang penggunaannya sangat penting.

Penggunaan kursor yang efektif dapat menciptakan kesan yang lebih profesional dan memudahkan pengguna dalam menavigasi dan berinteraksi dengan elemen-elemen di halaman web. Salah satu contoh penerapan properti kursor yang efektif adalah pada elemen-elemen form seperti tombol atau kolom input. Saat pengguna mengarahkan kursor ke tombol yang dapat diklik, perubahan bentuk kursor menjadi tangan memberikan sinyal yang jelas bahwa elemen tersebut berfungsi sebagai tombol interaktif yang dapat ditekan. Begitu pula dengan kolom input teks, dimana kursor berubah menjadi garis vertikal untuk menunjukkan bahwa elemen tersebut dapat diisi dengan teks.

Namun, perubahan bentuk kursor tidak hanya terbatas pada elemen-elemen yang dapat diklik atau diisi. Kursor juga dapat digunakan untuk memberikan umpan balik yang jelas pada elemen-elemen lain yang memiliki interaksi berbeda. Misalnya, dalam aplikasi berbasis grafis atau desain, kursor sering kali berubah menjadi bentuk silang atau panah ganda untuk menunjukkan bahwa elemen tersebut dapat dipindahkan atau diubah posisinya. Pada elemen seperti slider atau bilah geser, kursor sering kali berubah menjadi bentuk dengan dua arah untuk menunjukkan bahwa pengguna dapat melakukan penyesuaian dengan menarik elemen tersebut.

Selain itu, dalam pengaturan elemen-elemen yang memiliki interaksi yang lebih kompleks, seperti elemen-elemen yang dapat di-drag-and-drop, kursor juga berperan penting dalam memberi petunjuk visual yang jelas. Ketika pengguna melakukan hover pada elemen yang dapat dipindahkan, kursor dapat berubah menjadi bentuk dengan dua panah yang mengarah ke arah horizontal dan vertikal, menandakan bahwa elemen tersebut dapat dipindahkan ke lokasi lain dalam halaman web.

Penting juga untuk memahami penggunaan kursor pada elemen-elemen yang tidak dapat diakses atau dinonaktifkan. Dalam beberapa kasus, pengembang web ingin menonaktifkan elemen tertentu agar tidak dapat diakses oleh pengguna pada waktu tertentu, misalnya saat tombol sedang tidak aktif atau kolom input sedang dalam status nonaktif. Dalam hal ini, kursor dapat diubah menjadi bentuk dengan garis silang diagonal yang mengindikasikan bahwa elemen tersebut tidak dapat diklik atau berinteraksi. Hal ini membantu untuk menghindari kebingungannya pengguna dan memastikan bahwa elemen tersebut tidak diperlakukan seolah-olah dapat diakses.

Salah satu aspek yang juga perlu diperhatikan dalam penggunaan properti kursor adalah pengaruhnya terhadap kenyamanan pengguna dalam jangka panjang. Meskipun kursor dapat meningkatkan interaksi secara keseluruhan, penggunaan kursor yang tidak tepat atau terlalu banyak variasinya dapat menyebabkan kebingungannya pengguna. Misalnya, penggantian kursor yang terlalu sering atau penggunaan kursor yang terlalu kompleks dapat mengalihkan perhatian pengguna dari tugas utama yang sedang dilakukan. Oleh karena itu, pengaturan kursor yang konsisten dan sesuai dengan konteks sangat penting untuk menciptakan pengalaman pengguna yang nyaman.

Salah satu keunggulan lain dari properti kursor adalah kemampuannya untuk memberikan petunjuk tentang status atau status interaktif elemen. Selain elemen yang dapat diklik atau dipindahkan, kursor dapat digunakan untuk menunjukkan status lainnya. Misalnya, pada elemen yang sedang diproses atau sedang menunggu, kursor dapat diubah menjadi bentuk jam pasir atau lingkaran berputar untuk memberi tahu pengguna bahwa elemen tersebut sedang memproses perintah. Ini memberikan umpan balik yang jelas dan memungkinkan pengguna untuk menunggu dengan sabar tanpa merasa kebingungan atau tidak yakin tentang status elemen tersebut.

Selain itu, penggunaan properti kursor dapat disesuaikan dengan perangkat yang digunakan. Pengguna perangkat sentuh seperti ponsel pintar atau tablet tidak selalu melihat kursor secara fisik, tetapi prinsip dasar penggunaan kursor tetap berlaku. Pada perangkat sentuh, kursor sering kali digantikan dengan perubahan visual lain, seperti efek sentuhan atau perubahan pada elemen itu sendiri. Meski tidak menggunakan kursor secara eksplisit, interaksi pengguna tetap dapat dipandu dengan cara yang serupa untuk memastikan kelancaran penggunaan.

Secara keseluruhan, properti kursor dalam HTML berperan sangat penting dalam menciptakan antarmuka yang mudah digunakan, intuitif, dan memberikan umpan balik visual yang diperlukan agar pengguna dapat berinteraksi dengan halaman web secara efektif. Dengan penggunaan yang tepat, kursor tidak hanya berfungsi sebagai indikator posisi, tetapi juga sebagai alat untuk memberikan petunjuk interaktif yang memperkaya pengalaman pengguna. Properti ini memungkinkan pengembang untuk menciptakan halaman web yang responsif terhadap tindakan pengguna, serta meningkatkan kenyamanan dan efisiensi dalam navigasi dan interaksi.

Pemahaman yang mendalam mengenai penggunaan properti kursor ini sangat berguna bagi pengembang web dalam menciptakan halaman web yang tidak hanya fungsional, tetapi juga menyenangkan dan mudah digunakan. Penggunaan kursor yang tepat dapat membantu menjembatani komunikasi antara pengguna dan sistem, sehingga interaksi yang terjadi menjadi lebih alami dan efektif. Seiring berkembangnya teknologi dan desain web, penggunaan properti kursor akan terus berkembang, memberikan peluang baru untuk menciptakan pengalaman pengguna yang semakin baik.

Referensi Tambahan:

• 4 Value Properti Flex Style DOM pada HTML
• 4 Value Properti flexBasis Style DOM pada HTML
• 6 Value Properti flexDirection Style DOM pada HTML
• 4 Contoh Properti flexFlow Style DOM pada HTML
• 3 Value Properti flexGrow Style DOM pada HTML
• 3 Value Properti flexShrink Style DOM pada HTML
• 5 Value Properti flexWrap Style DOM pada HTML

Artikel ini akan dibaca oleh: Raihan Putratama Adisatya, Renanda Sukma Berliani, Ria Kusuma, Rio Budi Hendrawan, dan Risa Devi Anjaini.

Location: Kota Semarang, Jawa Tengah, Indonesia

Berbagi :