JavaScript के classList प्रॉपर्टी मेथड add() का उपयोग करके HTML एलिमेंट में क्लास जोड़ना सरल है। पहले, हम जेनेरिक फॉर्मूला पर एक त्वरित नज़र डालते हैं — और एक व्यावहारिक उदाहरण के साथ आगे बढ़ते हैं।
फॉर्मूला
var element = document.querySelector("selector") element.classList.add("class")ऊपर दिए गए जेनेरिक उदाहरण में, हम एक पेज पर निर्दिष्ट सेलेक्टर नाम (यह एलिमेंट सेलेक्टर, क्लास सेलेक्टर आदि हो सकता है) के साथ पहला HTML एलिमेंट ढूंढते हैं और एक वेरिएबल के साथ इसका रेफरेंस स्टोर करते हैं।
फिर हम एलिमेंट में classList प्रॉपर्टी का add() मेथड अटैच करते हैं और वह क्लास निर्दिष्ट करते हैं जिसे हम जोड़ना चाहते हैं।
व्यावहारिक classList उदाहरण
आइए इस पेज पर पहले पैराग्राफ एलिमेंट को ढूंढने की कोशिश करते हैं जिसे आप अभी पढ़ रहे हैं, और इसे bg-red क्लास देते हैं।
var firstParagraph = document.querySelector("p") firstParagraph.classList.add("bg-red")और परिणाम:
नोट: मेरी वेबसाइट की CSS स्टाइलशीट में bg-red क्लास है, इसलिए यह काम करता है। क्लास इस तरह दिखती है:
.bg-red { background-color: #cf4b32; }आप किसी भी कस्टम क्लास को जोड़ने के लिए classList add मेथड का उपयोग कर सकते हैं, किसी भी CSS प्रॉपर्टी का उपयोग करके, रंगों से लेकर फॉन्ट साइज़ तक।
एक ही एलिमेंट में कई क्लास जोड़ें
आप अपने टार्गेट एलिमेंट में एक साथ कई क्लास आसानी से जोड़ सकते हैं। आइए अपने पहले पैराग्राफ एलिमेंट में 3 क्लास जोड़ने की कोशिश करते हैं:
var firstParagraph = document.querySelector("p") firstParagraph.classList.add("text-center", "text-xxl", "italic")यह इस पेज पर पहले पैराग्राफ को सेंटर अलाइन करेगा और इसे बड़ा फॉन्ट साइज़ देगा, और इटैलिकाइज़ करेगा। इसे स्वयं आज़माएं।
संसाधन
- MDN Web Docs element.classList
