जावास्क्रिप्ट में HTML एलिमेंट्स कैसे छिपाएं/दिखाएं?

CSS स्टाइल का उपयोग करके हम जावास्क्रिप्ट में HTML एलिमेंट्स को छिपा या दिखा सकते हैं। CSS HTML एलिमेंट्स को छिपाने/दिखाने के लिए block और none जैसे गुण प्रदान करता है।

एलिमेंट छिपाना

उदाहरण

निम्नलिखित उदाहरण में जब "Hideme" बटन क्लिक किया गया तो पैराग्राफ टैग में टेक्स्ट आउटपुट में दिखाए अनुसार गायब हो गया।

<html> <body>    <p id="hide">Using JavaScript to hide HTML elements.</p>    <input type="button" onclick="document.getElementById('hide').style.display='none' value="Hideme"> </body> </html>

उपरोक्त कोड निष्पादित होने पर, निम्नलिखित प्रदर्शित होगा

उपरोक्त ब्लॉक से, यदि हम "Hideme" बटन पर क्लिक करते हैं, तो ब्लॉक में मौजूद टेक्स्ट आउटपुट में दिखाए अनुसार गायब हो जाएगा, केवल बटन शेष रहेगा।

आउटपुट

एलिमेंट दिखाना

उदाहरण

निम्नलिखित उदाहरण में, पैराग्राफ टैग में टेक्स्ट प्रारंभ में छिपा हुआ है लेकिन जब "Showme" क्लिक किया जाता है तो टेक्स्ट आउटपुट में दिखाए अनुसार प्रकट होता है।

<html> <body>    <p id="show" style="display:none">JavaScript can show hidden HTML elements</p>    <input type="button"onclick="document.getElementById('show').style.display='block'"value="ShowMe"> </body> </html>

उपरोक्त कोड निष्पादित होने पर, निम्नलिखित स्क्रीन पर प्रदर्शित होगा

यदि हम उपरोक्त बटन पर क्लिक करते हैं तो निम्नलिखित आउटपुट निष्पादित होगा

आउटपुट