एक तत्व छुपाएं: जावास्क्रिप्ट विशेषता और सीएसएस शैली

Question

के बीच अंतर मुझे आश्चर्य है कि परिणाम में कोई अंतर है जब जावास्क्रिप्ट विशेषता या सीएसएस शैली के साथ तत्व छिपाना है।

उदाहरण के लिए:

element.setAttribute("hidden", true); 

बनाम

element.style.visibility = "hidden"; 

मैं उन दो संभावनाओं के साथ एक सा प्रयोग किया। मेरी धारणा यह है कि, जब इसे जावास्क्रिप्ट से छुपाते हैं, तो तत्व वास्तव में छिपा हुआ होता है और प्रवाह से बाहर निकाला जाता है; और जब सीएसएस स्टाइल के साथ छिपाते हैं तो तत्व अभी नहीं दिखाया जाता है लेकिन फिर भी वहां होता है।

अधिकांशतः यह मेरे प्रयोगों में सही लग रहा था, लेकिन कभी-कभी नहीं। तो, उन दो संभावनाओं के बीच वास्तविक अंतर क्या है?

Answer 1

दो बुनियादी तरीकों है सीएसएस के साथ तत्व छिपाने के लिए:

सबसे पहले, visibility: hidden; (या element.style.visibility = "hidden";) है। यह बस आइटम अदृश्य बनाता है। यह अभी भी दस्तावेज़ में जगह लेता है, यह अभी भी प्रवाह का हिस्सा है।

फिर display: none; (या element.style.display = "none";) है। यह तत्व को पूरी तरह से दस्तावेज़ के प्रवाह से हटा देता है। यह अभी भी डोम में मौजूद है, यह सिर्फ पृष्ठ पर प्रस्तुत नहीं किया गया है।

एचटीएमएल 5 के hidden attribute (या element.setAttribute("hidden", true);) लगभग display: none; के बराबर है।

वास्तव में, विशेषता के साथ पुराने ब्राउज़र संगतता देने के लिए, यह अक्सर स्टाइलशीट में जोड़ा जाता है:

[hidden] { display: none; } 

Answer 2

कोड की इन दो पंक्तियों के बीच का अंतर यह है कि उनमें से एक तत्व को दिए गए मान के साथ तत्व में एक विशेषता जोड़ता है, जबकि दूसरा स्टाइल घोषणा के भीतर एक संपत्ति सेट करता है।

उदाहरण के लिए:

मान लें कि आपके तत्व चर एक div था करते हैं। जब आप

element.setAttribute("hidden", true); 

फोन तत्व अब इस तरह दिखेगा:

<div hidden="true"></div> 

जब आप फोन

element.style.visibility = "hidden"; 

आप मिल जाएगा:

<div style="visibility: hidden;"></div>