एचटीएमएल आईडी विशेषता
HTML idविशेषता का उपयोग HTML तत्व के लिए एक अद्वितीय आईडी निर्दिष्ट करने के लिए किया जाता है।
आपके पास HTML दस्तावेज़ में एक ही आईडी वाले एक से अधिक तत्व नहीं हो सकते हैं।
आईडी विशेषता का उपयोग करना
विशेषता HTML तत्व के idलिए एक अद्वितीय आईडी निर्दिष्ट करती है। id
HTML दस्तावेज़ में विशेषता का मान अद्वितीय होना चाहिए।
idस्टाइल शीट में विशिष्ट शैली घोषणा को इंगित करने के लिए विशेषता का उपयोग किया जाता है । इसका उपयोग जावास्क्रिप्ट द्वारा विशिष्ट आईडी के साथ तत्व तक पहुंचने और उसमें हेरफेर करने के लिए भी किया जाता है।
आईडी का सिंटैक्स है: एक हैश कैरेक्टर (#) लिखें, उसके बाद एक आईडी नाम लिखें। फिर, घुंघराले ब्रेसिज़ {} के भीतर CSS गुणों को परिभाषित करें।
निम्नलिखित उदाहरण में हमारे पास एक <h1>तत्व है जो आईडी नाम "myHeader" को इंगित करता है। इस तत्व को
हेड सेक्शन में स्टाइल की परिभाषा <h1>
के अनुसार स्टाइल किया जाएगा :#myHeader
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My
Header</h1>
</body>
</html>
नोट: आईडी नाम केस संवेदी है!
नोट: आईडी नाम में कम से कम एक वर्ण होना चाहिए, किसी संख्या से शुरू नहीं हो सकता है, और इसमें रिक्त स्थान (रिक्त स्थान, टैब, आदि) नहीं होना चाहिए।
कक्षा और आईडी के बीच अंतर
एक वर्ग के नाम का उपयोग कई HTML तत्वों द्वारा किया जा सकता है, जबकि एक आईडी नाम का उपयोग पृष्ठ के भीतर केवल एक HTML तत्व द्वारा किया जाना चाहिए:
उदाहरण
<style>
/* Style the element with the id "myHeader"
*/
#myHeader {
background-color: lightblue;
color: black;
padding:
40px;
text-align: center;
}
/* Style all
elements with the class name "city" */
.city
{
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- An element with a unique id -->
<h1 id="myHeader">My
Cities</h1>
<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
युक्ति: आप हमारे सीएसएस ट्यूटोरियल में सीएसएस के बारे में और जान सकते हैं ।
आईडी और लिंक के साथ HTML बुकमार्क
HTML बुकमार्क का उपयोग पाठकों को वेबपेज के विशिष्ट भागों में जाने की अनुमति देने के लिए किया जाता है।
यदि आपका पृष्ठ बहुत लंबा है तो बुकमार्क उपयोगी हो सकते हैं।
बुकमार्क का उपयोग करने के लिए, आपको पहले इसे बनाना होगा, और फिर उसमें एक लिंक जोड़ना होगा।
फिर, जब लिंक पर क्लिक किया जाता है, तो पेज बुकमार्क के साथ स्थान पर स्क्रॉल करेगा।
उदाहरण
सबसे पहले, विशेषता के साथ एक बुकमार्क बनाएं id:
<h2 id="C4">Chapter 4</h2>
फिर, उसी पृष्ठ के भीतर से बुकमार्क ("अध्याय 4 पर जाएं") में एक लिंक जोड़ें:
उदाहरण
<a href="#C4">Jump to Chapter 4</a>
या, किसी अन्य पृष्ठ से बुकमार्क ("अध्याय 4 पर जाएं") में एक लिंक जोड़ें:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
जावास्क्रिप्ट में आईडी विशेषता का उपयोग करना
विशेषता का idउपयोग जावास्क्रिप्ट द्वारा उस विशिष्ट तत्व के लिए कुछ कार्य करने के लिए भी किया जा सकता है।
getElementById()जावास्क्रिप्ट विधि के साथ एक विशिष्ट आईडी वाले तत्व तक पहुंच सकता है :
उदाहरण
idजावास्क्रिप्ट के साथ टेक्स्ट में हेरफेर करने के लिए विशेषता का उपयोग करें :
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
युक्ति: जावास्क्रिप्ट का अध्ययन HTML जावास्क्रिप्ट अध्याय में, या हमारे जावास्क्रिप्ट ट्यूटोरियल में करें ।
अध्याय का सारांश
idHTML तत्व के लिए एक अद्वितीय आईडी निर्दिष्ट करने के लिए विशेषता का उपयोग किया जाता हैidHTML दस्तावेज़ में विशेषता का मान अद्वितीय होना चाहिए- विशेषता का
idउपयोग सीएसएस और जावास्क्रिप्ट द्वारा किसी विशिष्ट तत्व को स्टाइल/चयन करने के लिए किया जाता है - विशेषता का मान
idकेस संवेदी है - विशेषता का
idउपयोग HTML बुकमार्क बनाने के लिए भी किया जाता है getElementById()जावास्क्रिप्ट विधि के साथ एक विशिष्ट आईडी वाले तत्व तक पहुंच सकता है