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 | इस प्रॉपर्टी को अपने मूल तत्व से विरासत में लेता है। |
आइए cursor प्रॉपर्टी के लिए एक उदाहरण देखें:
उदाहरण
<!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="पहले पैराग्राफ पर होवर करके कर्सर को सेल में बदलते देखें और दूसरे पर ग्रैब आइकन में"; } </script> </head> <body> <p id="one">यह पहले पैराग्राफ के अंदर कुछ नमूना टेक्स्ट है। यह पहले पैराग्राफ के अंदर कुछ नमूना टेक्स्ट है। यह पहले पैराग्राफ के अंदर कुछ नमूना टेक्स्ट है। यह पहले पैराग्राफ के अंदर कुछ नमूना टेक्स्ट है।</p> <p id="two">यह दूसरे पैराग्राफ के अंदर कुछ नमूना टेक्स्ट है। यह दूसरे पैराग्राफ के अंदर कुछ नमूना टेक्स्ट है। यह दूसरे पैराग्राफ के अंदर कुछ नमूना टेक्स्ट है। यह दूसरे पैराग्राफ के अंदर कुछ नमूना टेक्स्ट है।</p> <p>नीचे दिए गए बटन पर क्लिक करके कर्सर प्रॉपर्टी बदलें</p> <button onclick="changeCursor()">कर्सर बदलें</button> <p id="Sample"></p> </body> </html>आउटपुट
कर्सर बदलें बटन पर क्लिक करने पर, कर्सर बदल गया और वही नीचे स्क्रीनशॉट में दिखाई दे रहा है:
