في JavaScript، يمكننا إخفاء العناصر باستخدام ملف style.display أو باستخدام style.visibility . ال الرؤية تُستخدم الخاصية في JavaScript أيضًا لإخفاء عنصر. الفرق بين style.display و style.visibility هو عند الاستخدام الرؤية: مخفية، العلامة غير مرئية، ولكن يتم تخصيص مساحة. استخدام عرض لا شيء، العلامة أيضًا غير مرئية، ولكن لا توجد مساحة مخصصة على الصفحة.

في HTML، يمكننا استخدام مختفي سمة لإخفاء العنصر المحدد. عندما مختفي يتم ضبط السمة في HTML على true، أو يكون العنصر مخفيًا، أو عندما تكون القيمة خطأ شنيع، العنصر مرئي.

لا

بناء الجملة

بناء الجملة العام لإخفاء عنصر باستخدام style.hidden و style.visibility ويرد على النحو التالي.

استخدام style.hidden

 document.getElementById('element').style.display = 'none'; 

استخدام style.visibility

 document.getElementById('element').style.visibility = 'none'; 

الآن، دعونا نرى بعض الأمثلة لفهم إخفاء العناصر فيها جافا سكريبت .

مجموعة في السلسلة

مثال 1

في هذا المثال، سنرى كيفية إزالة العناصر باستخدام JavaScript style.display ملكية. هنا، هناك أ شعبة العنصر وعنصر الفقرة الذي يتم إخفاءه عند النقر فوق المحدد زر HTML . علينا أن نضغط على 'انقر فوق لي!' زر لرؤية التأثير.

 style.display <h2> Using both style.visibility and style.display properties </h2> This is the div element. <p> This is a paragraph element. </p> <h3 id="heading"> This is the heading after the paragraph element. </h3> Click me! function fun() { document.getElementById(&apos;div&apos;).style.visibility = &apos;hidden&apos;; document.getElementById(&apos;heading&apos;).style.display = &apos;none&apos;; } 

انتاج |

في الإخراج، يمكننا أن نرى أن شعبة العنصر (الذي طبقنا عليه style.visibility property) مختبئ ولكنه لا يزال يخصص المساحة. لكن العنوان (الذي طبقنا عليه style.display property) يختبئ ولا يخصص أي مساحة.

وبعد الضغط على الزر ستكون النتيجة -