वेनिला जावास्क्रिप्ट के साथ एक तत्व में कक्षा कैसे जोड़ें

जावास्क्रिप्ट की क्लासलिस्ट संपत्ति विधि का उपयोग करते समय एक HTML तत्व में एक वर्ग जोड़ना सरल है,add() . सबसे पहले, हम सामान्य सूत्र पर एक त्वरित नज़र डालते हैं — और एक व्यावहारिक उदाहरण के साथ अनुवर्ती कार्रवाई करते हैं।

सूत्र

var element = document.querySelector("selector")
element.classList.add("class")

ऊपर दिए गए सामान्य उदाहरण में, हमें पहला HTML तत्व . मिलता है निर्दिष्टचयनकर्ता नाम . वाले पृष्ठ पर (यह एक तत्व चयनकर्ता, वर्ग चयनकर्ता, आदि हो सकता है) और एक चर के साथ इसका संदर्भ संग्रहीत करें।

फिर हम क्लासलिस्ट प्रॉपर्टी . संलग्न करते हैं add() तत्व के लिए विधि और उस वर्ग को निर्दिष्ट करें जिसे हम जोड़ना चाहते हैं।

प्रैक्टिकल क्लासलिस्ट उदाहरण

आइए इस पृष्ठ पर पहले पैराग्राफ तत्व को खोजने का प्रयास करें जिसे आप अभी पढ़ रहे हैं, और इसे bg-red का एक वर्ग दें ।

var firstParagraph = document.querySelector("p")
firstParagraph.classList.add("bg-red")

और परिणाम:

नोट:मेरे पास bg-red है मेरी वेबसाइट की CSS स्टाइलशीट में क्लास है, इसलिए यह काम करती है। कक्षा इस तरह दिखती है:

.bg-red {
  background-color: #cf4b32;
}

आप रंगों से लेकर फ़ॉन्ट आकार तक, किसी भी सीएसएस संपत्ति का उपयोग करके किसी भी कस्टम वर्ग को जोड़ने के लिए क्लासलिस्ट ऐड विधि का उपयोग कर सकते हैं।

एक ही तत्व में अनेक वर्ग जोड़ें

आप एक ही समय में अपने लक्षित तत्व में आसानी से कई कक्षाएं जोड़ सकते हैं। आइए अपने पहले अनुच्छेद तत्व में 3 कक्षाएं जोड़ने का प्रयास करें:

var firstParagraph = document.querySelector("p")

firstParagraph.classList.add("text-center", "text-xxl", "italic")

यह इस पृष्ठ पर पहले पैराग्राफ को केंद्र में संरेखित करेगा और इसे एक बड़ा फ़ॉन्ट आकार देगा, और इसे इटैलिकाइज़ करेगा। इसे स्वयं आज़माएं।

संसाधन

• एमडीएन वेब डॉक्स element.classList