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(&apos;div&apos;).style.visibility = &apos;hidden&apos;; document.getElementById(&apos;heading&apos;).style.display = &apos;none&apos;; } 

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 -