HTML वर्ग विशेषता
HTML classविशेषता का उपयोग HTML तत्व के लिए एक वर्ग निर्दिष्ट करने के लिए किया जाता है।
एकाधिक HTML तत्व एक ही कक्षा साझा कर सकते हैं।
वर्ग विशेषता का उपयोग करना
classस्टाइल शीट में वर्ग के नाम को इंगित करने के लिए अक्सर विशेषता का उपयोग किया जाता है । इसका उपयोग जावास्क्रिप्ट द्वारा विशिष्ट वर्ग नाम वाले तत्वों तक पहुंचने और उनमें हेरफेर करने के लिए भी किया जा सकता है।
निम्नलिखित उदाहरण में हमारे पास "शहर" के मान के <div>साथ एक विशेषता वाले तीन तत्व हैं । classसभी तीन तत्वों को
हेड सेक्शन में शैली परिभाषा <div>
के अनुसार समान रूप से स्टाइल किया जाएगा :.city
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
निम्नलिखित उदाहरण में हमारे पास "नोट" के मान वाले विशेषता वाले दो <span>तत्व हैं । classदोनों तत्वों को
हेड सेक्शन में शैली परिभाषा <span>
के अनुसार समान रूप से स्टाइल किया जाएगा :.note
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
युक्ति:class विशेषता का उपयोग किसी भी HTML तत्व पर किया जा सकता है ।
नोट: क्लास का नाम केस सेंसिटिव है!
युक्ति: आप हमारे सीएसएस ट्यूटोरियल में सीएसएस के बारे में और जान सकते हैं ।
कक्षा के लिए सिंटेक्स
एक वर्ग बनाने के लिए; एक अवधि (।) वर्ण लिखें, उसके बाद एक वर्ग का नाम लिखें। फिर, घुंघराले ब्रेसिज़ {} के भीतर CSS गुणों को परिभाषित करें:
उदाहरण
"शहर" नामक एक वर्ग बनाएं:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<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>
</body>
</html>
एकाधिक वर्ग
HTML तत्व एक से अधिक वर्ग से संबंधित हो सकते हैं।
अनेक वर्गों को परिभाषित करने के लिए, वर्ग नामों को एक स्थान से अलग करें, उदाहरण के लिए <div class="city main">। एलिमेंट को निर्दिष्ट सभी वर्गों के अनुसार स्टाइल किया जाएगा।
निम्नलिखित उदाहरण में, पहला <h2>तत्व
cityवर्ग और वर्ग दोनों का है main, और दोनों वर्गों से CSS शैलियाँ प्राप्त करेगा:
उदाहरण
<h2
class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2
class="city">Tokyo</h2>
विभिन्न तत्व समान वर्ग साझा कर सकते हैं
विभिन्न HTML तत्व एक ही वर्ग के नाम को इंगित कर सकते हैं।
निम्नलिखित उदाहरण में, दोनों <h2>और <p>
"शहर" वर्ग की ओर इशारा करते हैं और समान शैली साझा करेंगे:
उदाहरण
<h2 class="city">Paris</h2>
<p
class="city">Paris is the capital of France</p>
जावास्क्रिप्ट में वर्ग विशेषता का उपयोग
विशिष्ट तत्वों के लिए कुछ कार्य करने के लिए जावास्क्रिप्ट द्वारा वर्ग नाम का भी उपयोग किया जा सकता है।
getElementsByClassName()जावास्क्रिप्ट विधि के साथ एक विशिष्ट वर्ग नाम वाले तत्वों तक पहुँच सकता है :
उदाहरण
"शहर" वर्ग नाम वाले सभी तत्वों को छिपाने के लिए एक बटन पर क्लिक करें:
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length;
i++) {
x[i].style.display = "none";
}
}
</script>
यदि आप ऊपर दिए गए उदाहरण में दिए गए कोड को नहीं समझते हैं, तो चिंता न करें।
आप हमारे HTML जावास्क्रिप्ट अध्याय में जावास्क्रिप्ट के बारे में अधिक जानेंगे , या आप हमारे जावास्क्रिप्ट ट्यूटोरियल का अध्ययन कर सकते हैं ।
अध्याय का सारांश
- HTML
classविशेषता किसी तत्व के लिए एक या अधिक वर्ग नाम निर्दिष्ट करती है - CSS और JavaScript द्वारा कक्षाओं का उपयोग विशिष्ट तत्वों को चुनने और उन तक पहुँचने के लिए किया जाता है
- विशेषता का
classउपयोग किसी भी HTML तत्व पर किया जा सकता है - क्लास का नाम केस सेंसिटिव है
- विभिन्न HTML तत्व एक ही वर्ग के नाम को इंगित कर सकते हैं
getElementsByClassName()जावास्क्रिप्ट विधि के साथ एक विशिष्ट वर्ग नाम वाले तत्वों तक पहुंच सकता है