HTML DOM Style cursor প্রপার্টি মাউস পয়েন্টার প্রদর্শন করার সময় কার্সর টাইপ সেট বা পাওয়ার জন্য ব্যবহৃত হয়।
সিনট্যাক্স
cursor প্রপার্টি সেট করার সিনট্যাক্স:
object.style.cursor=value
নিচের টেবিলে মানগুলো প্রদর্শিত হয়েছে:
| মান | বিবরণ |
|---|---|
| alias | কার্সর নির্দেশ করে যে কিছুর আলিয়াস তৈরি করা হবে। |
| all-scroll | কার্সর নির্দেশ করে যে যেকোনো দিকে স্ক্রোল করা সম্ভব। |
| auto | ডিফল্ট। ব্রাউজার কার্সর সেট করে। |
| cell | কার্সর নির্দেশ করে যে একটি সেল (বা সেল সেট) সিলেক্ট করা যেতে পারে। |
| context-menu | কার্সর নির্দেশ করে যে কনটেক্সট-মেনু উপলব্ধ। |
| col-resize | কার্সর নির্দেশ করে যে কলাম অনুভূমিকভাবে রিসাইজ করা যাবে। |
| copy | কার্সর নির্দেশ করে যে কিছু কপি করা হবে। |
| crosshair | কার্সর ক্রসহেয়ার হিসেবে রেন্ডার হয়। |
| default | ডিফল্ট কার্সর। |
| e-resize | কার্সর নির্দেশ করে যে বক্সের একটি প্রান্ত ডানে (ইস্ট) সরানো হবে। |
| ew-resize | বাইডিরেকশনাল রিসাইজ কার্সর নির্দেশ করে। |
| grab | কার্সর নির্দেশ করে যে কিছু গ্র্যাব করা যাবে। |
| grabbing | কার্সর নির্দেশ করে যে কিছু গ্র্যাব করা যাবে। |
| help | কার্সর নির্দেশ করে যে সাহায্য উপলব্ধ। |
| move | কার্সর নির্দেশ করে যে কিছু সরানো হবে। |
| n-resize | কার্সর নির্দেশ করে যে বক্সের একটি প্রান্ত উপরে (নর্থ) সরানো হবে। |
| ne-resize | কার্সর নির্দেশ করে যে বক্সের একটি প্রান্ত উপরে এবং ডানে (নর্থ/ইস্ট) সরানো হবে। |
| nesw-resize | বাইডিরেকশনাল রিসাইজ কার্সর নির্দেশ করে। |
| ns-resize | বাইডিরেকশনাল রিসাইজ কার্সর নির্দেশ করে। |
| nw-resize | কার্সর নির্দেশ করে যে বক্সের একটি প্রান্ত উপরে এবং বামে (নর্থ/ওয়েস্ট) সরানো হবে। |
| nwse-resize | বাইডিরেকশনাল রিসাইজ কার্সর নির্দেশ করে। |
| no-drop | কার্সর নির্দেশ করে যে ড্র্যাগ করা আইটেম এখানে ড্রপ করা যাবে না। |
| none | এলিমেন্টের জন্য কোনো কার্সর রেন্ডার হয় না। |
| not-allowed | কার্সর নির্দেশ করে যে অনুরোধ করা অ্যাকশন এক্সিকিউট হবে না। |
| pointer | কার্সর একটি পয়েন্টার এবং লিংক নির্দেশ করে। |
| progress | কার্সর নির্দেশ করে যে প্রোগ্রাম ব্যস্ত (প্রগতিশীল)। |
| row-resize | কার্সর নির্দেশ করে যে রো লম্বিকভাবে রিসাইজ করা যাবে। |
| s-resize | কার্সর নির্দেশ করে যে বক্সের একটি প্রান্ত নিচে (সাউথ) সরানো হবে। |
| se-resize | কার্সর নির্দেশ করে যে বক্সের একটি প্রান্ত নিচে এবং ডানে (সাউথ/ইস্ট) সরানো হবে। |
| sw-resize | কার্সর নির্দেশ করে যে বক্সের একটি প্রান্ত নিচে এবং বামে (সাউথ/ওয়েস্ট) সরানো হবে। |
| text | কার্সর নির্দেশ করে যে টেক্সট সিলেক্ট করা যাবে। |
| URL | কাস্টম কার্সরের জন্য URL-এর কমা-সেপারেটেড তালিকা। নোট: তালিকার শেষে জেনেরিক কার্সর সবসময় নির্দিষ্ট করুন, যদি URL-ডিফাইনড কার্সরগুলো ব্যবহার করা না যায়। |
| vertical-text | কার্সর নির্দেশ করে যে ভার্টিক্যাল-টেক্সট সিলেক্ট করা যাবে। |
| w-resize | কার্সর নির্দেশ করে যে বক্সের একটি প্রান্ত বামে (ওয়েস্ট) সরানো হবে। |
| wait | কার্সর নির্দেশ করে যে প্রোগ্রাম ব্যস্ত। |
| zoom-in | কার্সর নির্দেশ করে যে কিছু জুম ইন করা যাবে। |
| zoom-out | কার্সর নির্দেশ করে যে কিছু জুম আউট করা যাবে। |
| initial | এই প্রপার্টিকে এর ডিফল্ট মানে সেট করে। |
| inherit | এই প্রপার্টিকে এর পিতামাতা এলিমেন্ট থেকে উত্তরাধিকার সূত্রে গ্রহণ করে। |
উদাহরণ
<!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="প্রথম প্যারাগ্রাফের ওপর হোভার করলে কার্সর cell-এ পরিবর্তন হবে এবং দ্বিতীয়ে grab আইকনে"; } </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>নিচের বাটনে ক্লিক করলে কার্সর প্রপার্টি পরিবর্তন হবে</p> <button onclick="changeCursor()">কার্সর পরিবর্তন করুন</button> <p id="Sample"></p> </body> </html>
আউটপুট
কার্সর পরিবর্তন করুন বাটনে ক্লিক করলে, কার্সর পরিবর্তন হয়েছে এবং নিচের স্ক্রিনশটে তা দৃশ্যমান:
