HTML class गुण

व्याख्या और उपयोग

class एलीमेंट की class नाम (classname) निर्धारित करता है।

class अभियान विशेषतः शैली पट्टी (class) के लिए प्रयोग किया जाता है। हालांकि, यह JavaScript (HTML DOM) के माध्यम से निर्दिष्ट class वाले HTML एलीमेंट को बदलने के लिए भी उपयोग किया जा सकता है।

और देखें:

HTML शिक्षा:HTML गुण

CSS शिक्षा:CSS व्याकरण

CSS संदर्भ निर्देशागार:CSS .class चयनक

HTML DOM संदर्भ निर्देशागार:HTML DOM getElementsByClassName() विधि

HTML DOM संदर्भ निर्देशागार:HTML DOM className गुण

HTML DOM संदर्भ निर्देशागार:HTML DOM classList गुण

HTML DOM संदर्भ निर्देशागार:HTML DOM Style ऑब्जैक्ट

उदाहरण

उदाहरण 1

हैलटेम डॉक्यूमेंट में class गुण का उपयोग करना:

<html>
<head>
<style>
h1.intro {
  color: blue;
}
p.important {
  color: green;
}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">ध्यान दें, यह एक महत्वपूर्ण पैराग्राफ है。:）</p>
</body>
</html>

अपने आप प्रयास कीजिए

पृष्ठ के नीचे और अधिक उदाहरण मिलेंगे。

व्याकरण

<element class="classname">

गुण मूल्य

मूल्य वर्णन
classname

एलिमेंट को एक या अनेक क्लासेस नाम निर्दिष्ट करें。

कई क्लासेस निर्दिष्ट करने के लिए, क्लासेस नाम को स्पेस से अलग करें。

यह एक हैलटेम एलिमेंट के लिए कई CSS क्लासेस को समझाने की अनुमति देता है。

उदाहरण: <span class="left important">

नामकरण नियम:

  • आरंभ में अक्षर A-Z या a-z होना चाहिए
  • इसके बाद जोड़ सकते हैं: अक्षर (A-Za-z)、संख्या (0-9)、हवाला ("-" और नीचे रेखा ("_")

और अधिक उदाहरण

उदाहरण 2

एक हैलटेम एलिमेंट को कई क्लासेस जोड़ें:

<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
  color: blue;
  text-align: center;
}
.important {
  background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">शीर्षक 1</h1>
<p>एक पैराग्राफ。</p>
</body>
</html>

अपने आप प्रयास कीजिए

उदाहरण 3

जेसेक्रिप्ट के द्वारा पहले class="example" के एलिमेंट (इंडेक्स 0) पर पीला पृष्ठभूमि रंग जोड़ें।

let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";

अपने आप प्रयास कीजिए

उदाहरण 4

JavaScript का उपयोग कर "mystyle" वर्ग को id लिए "myDIV" के एलीमेंट में जोड़ें:

document.getElementById("myDIV").classList.add("mystyle");

अपने आप प्रयास कीजिए

ब्राउज़र सहायता

च्रोम एज फायरफॉक्स सफारी ऑपेरा
च्रोम एज फायरफॉक्स सफारी ऑपेरा
सहायता सहायता सहायता सहायता सहायता