logo

JavaScript הסתר אלמנטים

ב-JavaScript, אנו יכולים להסתיר את האלמנטים באמצעות ה style.display או באמצעות סגנון.נראות . ה רְאוּת מאפיין ב-JavaScript משמש גם להסתרת אלמנט. ההבדל בין ה style.display ו סגנון.נראות הוא בעת השימוש נראות: מוסתר, התג אינו גלוי, אך מוקצה מקום. באמצעות אל תציג דבר, התג גם אינו גלוי, אך אין מקום מוקצה בדף.

מפה java

ב-HTML, אנו יכולים להשתמש ב- מוּסתָר תכונה כדי להסתיר את האלמנט שצוין. כאשר מוּסתָר תכונה ב-HTML מוגדרת כ-true, האלמנט מוסתר, או כשהערך הוא שֶׁקֶר, האלמנט גלוי.

תחביר

התחביר הכללי להסתרת אלמנט באמצעות סגנון.מוסתר ו סגנון.נראות ניתן כדלקמן.

באמצעות סגנון.מוסתר

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

באמצעות סגנון.נראות

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

כעת, בואו נראה כמה דוגמאות כדי להבין את ההסתרה של אלמנטים בתוכם javascript .

דוגמה1

בדוגמה זו, נראה כיצד להסיר אלמנטים באמצעות JavaScript style.display תכונה. כאן, יש א div אלמנט ורכיב פסקה שמסתתר בלחיצה על הנתון כפתור 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;; } 
בדוק את זה עכשיו

תְפוּקָה

בפלט, אנו יכולים לראות כי div אלמנט (עליו החלנו סגנון.נראות רכוש) מסתתר אך עדיין מקצה את השטח. אבל הכותרת (עליה החלנו style.display רכוש) מסתתר ואינו מקצה מקום כלשהו.

JavaScript הסתר אלמנטים

לאחר לחיצה על הכפתור, התוצאה תהיה -

JavaScript הסתר אלמנטים