सादा जावास्क्रिप्ट के साथ डोम तत्वों को कैसे छुपाएं और दिखाएं

सादे, वैनिला जावास्क्रिप्ट के साथ DOM तत्वों को छिपाने और दिखाने का तरीका जानें।

जावास्क्रिप्ट में एक शैली गुण होता है, जिसे उपयुक्त रूप से style . कहा जाता है , जिसका उपयोग तत्वों पर CSS गुणों को सेट करने के लिए किया जा सकता है, और उन्हें ठीक उसी तरह स्टाइल किया जा सकता है जैसे आप CSS के साथ कर सकते हैं। आइए इसे आजमाएं!

आप जावास्क्रिप्ट के साथ एक DOM तत्व को इस प्रकार छिपाते हैं:

element.style.display = "none"

DOM तत्व को फिर से प्रदर्शित करने के लिए:

element.style.display = "block"

नोट:यदि आपका DOM तत्व मूल रूप से inline पर सेट किया गया था या inline-block , बस block . को बदलें उन मानों में से एक के साथ ऊपर का मान।

व्यावहारिक उदाहरण

ऊपर के उदाहरण में, element सिर्फ एक सामान्य प्लेसहोल्डर है। JavaScript की style का उपयोग करने के लिए एक व्यावहारिक अर्थ में संपत्ति, आपको सबसे पहले उस DOM तत्व का चयन करना होगा जिसे आप स्टाइल करना चाहते हैं।

मान लें कि आपके पास एक बटन है जिसे आप DOM से हटाना चाहते हैं, जिसे cta-button कहा जाता है . आप इसे इस तरह करेंगे:

const ctaButton = document.querySelector(".cta-button")

ctaButton.style.display = "none"