HTML DOM स्टाइल कर्सर प्रॉपर्टी का उपयोग माउस पॉइंटर को प्रदर्शित करते समय कर्सर प्रकार को सेट करने या प्राप्त करने के लिए किया जाता है।
−
. के लिए वाक्य रचना निम्नलिखित हैकर्सर गुण सेट करना -
object.style.cursor=value
निम्न तालिका मान दर्शाती है
| मान <वें>विवरण | |
|---|---|
| उपनाम | Thecursor इंगित करता है कि किसी चीज़ का उपनाम बनाया जाना है |
| ऑल-स्क्रॉल | कर्सर इंगित करता है कि किसी भी दिशा में कुछ स्क्रॉल किया जा सकता है |
| स्वतः | Default.Browser एक कर्सर सेट करता है |
| सेल | कर्सर इंगित करता है कि एक सेल (या कोशिकाओं का सेट) का चयन किया जा सकता है |
| संदर्भ-मेनू | कर्सर इंगित करता है कि एक संदर्भ-मेनू उपलब्ध है |
| col-resize | कर्सर इंगित करता है कि स्तंभ को क्षैतिज रूप से आकार दिया जा सकता है |
| प्रतिलिपि | कर्सर इंगित करता है कि कुछ कॉपी किया जाना है |
| क्रॉसहेयर | कर्सर क्रॉसहेयर के रूप में प्रस्तुत करता है |
| डिफ़ॉल्ट | डिफ़ॉल्ट कर्सर |
| e-resize | कर्सर इंगित करता है कि एक बॉक्स के किनारे को दाएं (पूर्व) ले जाया जाना है |
| ew-resize | संकेत द्विदिश आकार बदलने वाला कर्सर |
| पकड़ो | कर्सर इंगित करता है कि कुछ पकड़ा जा सकता है |
| हथियाना | कर्सर इंगित करता है कि कुछ पकड़ा जा सकता है |
| help | कर्सर इंगित करता है कि सहायता उपलब्ध है |
| स्थानांतरित करें | कर्सर इंगित करता है कि कुछ स्थानांतरित किया जाना है |
| n-resize | कर्सर इंगित करता है कि एक बॉक्स के किनारे को ऊपर (उत्तर) ले जाया जाना है |
| ne-resize | कर्सर इंगित करता है कि एक बॉक्स के किनारे को ऊपर और दाएं (उत्तर/पूर्व) ले जाया जाना है |
| nesw-resize | संकेत द्विदिश आकार बदलने वाला कर्सर |
| ns-resize | संकेत द्विदिश आकार बदलने वाला कर्सर |
| nw-resize | कर्सर इंगित करता है कि एक बॉक्स के किनारे को ऊपर और बाएं (उत्तर/पश्चिम) ले जाया जाना है |
| nwse-resize | संकेत द्विदिश आकार बदलने वाला कर्सर |
| नो-ड्रॉप | कर्सर इंगित करता है कि खींची गई वस्तु को यहां नहीं छोड़ा जा सकता |
| कोई नहीं | तत्व के लिए Nocursor रेंडर किया गया है |
| अनुमति नहीं है | कर्सर इंगित करता है कि अनुरोधित कार्रवाई निष्पादित नहीं की जाएगी |
| pointer | कर्सर एक सूचक है और एक लिंक को इंगित करता है |
| प्रगति | कर्सर इंगित करता है कि कार्यक्रम व्यस्त है (प्रगति में) |
| row-resize | कर्सर इंगित करता है कि पंक्ति को लंबवत रूप से बदला जा सकता है |
| s-resize | कर्सर इंगित करता है कि एक बॉक्स के किनारे को नीचे (दक्षिण) ले जाया जाना है |
| se-resize | कर्सर इंगित करता है कि एक बॉक्स के किनारे को नीचे और दाएं (दक्षिण/पूर्व) ले जाया जाना है |
| sw-resize | कर्सर इंगित करता है कि एक बॉक्स के किनारे को नीचे और बाएं (दक्षिण/पश्चिम) ले जाया जाना है |
| text | कर्सर उस पाठ को इंगित करता है जिसे चुना जा सकता है |
| URL | कस्टम कर्सर के लिए URL की एक अल्पविराम से अलग की गई सूची। नोट:सूची के अंत में हमेशा एक सामान्य कर्सर निर्दिष्ट करें, यदि URL-परिभाषित किसी भी कर्सर का उपयोग नहीं किया जा सकता है |
| ऊर्ध्वाधर-पाठ | कर्सर वर्टिकल-टेक्स्ट को इंगित करता है जिसे चुना जा सकता है |
| w-resize | कर्सर इंगित करता है कि बॉक्स के किनारे को बाईं ओर (पश्चिम) ले जाया जाना है |
| प्रतीक्षा करें | कर्सर इंगित करता है कि कार्यक्रम व्यस्त है |
| ज़ूम-इन | कर्सर इंगित करता है कि कुछ ज़ूम इन किया जा सकता है |
| ज़ूम-आउट | कर्सर इंगित करता है कि कुछ ज़ूम आउट किया जा सकता है |
| प्रारंभिक | इस गुण को उसके डिफ़ॉल्ट मान पर सेट करता है। |
| उत्तराधिकारी | इस गुण को इसके मूल तत्व से विरासत में मिला है। |
आइए कर्सर संपत्ति के लिए एक उदाहरण देखें -
उदाहरण
<!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> आउटपुट
“कर्सर बदलें . क्लिक करने पर ” बटन, कर्सर बदल गया और वही नीचे स्क्रीनशॉट में दिखाई दे रहा है -
