A JavaScriptben elrejthetjük az elemeket a stílus.megjelenítés vagy a stílus.láthatóság . A láthatóság A JavaScript-ben lévő tulajdonság egy elem elrejtésére is használható. A különbség a stílus.megjelenítés és stílus.láthatóság használat közben van láthatóság: rejtett, a címke nem látható, de hely van lefoglalva. Használata kijelző: nincs, a címke szintén nem látható, de nincs lefoglalva hely az oldalon.
A HTML-ben használhatjuk a rejtett attribútumot a megadott elem elrejtéséhez. Amikor az rejtett attribútum a HTML-ben igazra állítja, az elem rejtett, vagy ha az érték az hamis, az elem látható.
Szintaxis
Az elem elrejtésének általános szintaxisa stílus.rejtett és stílus.láthatóság a következőképpen van megadva.
Használata stílus.rejtett
document.getElementById('element').style.display = 'none';
Használata stílus.láthatóság
document.getElementById('element').style.visibility = 'none';
Most lássunk néhány példát az elemek elrejtésének megértéséhez javascript .
Példa1
Ebben a példában látni fogjuk, hogyan távolíthatunk el elemeket JavaScript használatával stílus.megjelenítés ingatlan. Itt van egy div elemet és egy bekezdéselemet, amely elrejti az adott elemre kattintva HTML gomb . Rá kell kattintanunk a 'Kattints ide!' gombot a hatás megtekintéséhez.
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('div').style.visibility = 'hidden'; document.getElementById('heading').style.display = 'none'; } Tesztelje most Kimenet
A kimenetben láthatjuk, hogy a div elem (amelyre alkalmaztuk stílus.láthatóság ingatlan) rejtőzködik, de még kiosztja a helyet. De a címsor (amelyre alkalmaztuk stílus.megjelenítés ingatlan) elrejtőzik, és nem oszt ki helyet.
A gombra kattintás után az eredmény:
