JavaScriptissä voimme piilottaa elementit käyttämällä tyyli.näyttö tai käyttämällä tyyli.näkyvyys . The näkyvyys JavaScriptin ominaisuutta käytetään myös elementin piilottamiseen. Ero tyyli.näyttö ja tyyli.näkyvyys on käytettäessä näkyvyys: piilotettu, tunniste ei ole näkyvissä, mutta tilaa on varattu. Käyttämällä näyttö: ei mitään, tunniste ei myöskään ole näkyvissä, mutta sivulla ei ole varattu tilaa.
HTML:ssä voimme käyttää piilotettu attribuutti piilottaaksesi määritetyn elementin. Kun piilotettu HTML-attribuutti asettaa arvoon tosi, elementti on piilotettu tai kun arvo on väärä, elementti näkyy.
merkkijonon muuntaminen int
Syntaksi
Yleinen syntaksi elementin piilottamiseksi tyyli. piilotettu ja tyyli.näkyvyys annetaan seuraavasti.
Käyttämällä tyyli. piilotettu
document.getElementById('element').style.display = 'none';
Käyttämällä tyyli.näkyvyys
document.getElementById('element').style.visibility = 'none';
Katsotaanpa nyt joitain esimerkkejä elementtien piilottamisen ymmärtämiseksi javascript .
Escape merkki java
Esimerkki1
Tässä esimerkissä näemme, kuinka elementtejä poistetaan JavaScriptin avulla tyyli.näyttö omaisuutta. Täällä on a div elementti ja kappaleelementti, joka piiloutuu napsauttamalla annettua HTML-painike . Meidän on napsautettava 'Klikkaa minua!' -painiketta nähdäksesi vaikutuksen.
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'; } Testaa nyt Lähtö
Tulosteessa voimme nähdä, että div elementti (johon olemme soveltaneet tyyli.näkyvyys kiinteistö) on piilossa, mutta varaa silti tilaa. Mutta otsikko (johon olemme hakeneet tyyli.näyttö omaisuus) piiloutuu eikä varaa tilaa.
Painikkeen painamisen jälkeen tulos on -
