Soms is het bij het opmaken van een webpagina nodig om enkele van de daarin geplaatste elementen te verbergen. Als u bijvoorbeeld wilt dat de bezoeker de verzendknoppen voor het formulier niet ziet totdat alle verplichte velden zijn ingevuld. Of als de knop helemaal niet bedoeld is om door de bezoeker te worden gebruikt, maar het script dat op deze pagina is geplaatst, erop moet "klikken".
instructies:
Stap 1
Gebruik de eigenschap display van de Cascading Style Sheets (CSS) om de weergave van de gewenste pagina-elementen in of uit te schakelen. Volgens internationale normen kan aan deze eigenschap meer dan anderhalf dozijn waarden worden toegewezen die verschillende weergavemethoden specificeren. Slechts vier zijn echter cross-browser (d.w.z. werken in alle belangrijke browsers). Van deze vier is er de geen-waarde die u nodig hebt, waarmee u het gewenste pagina-element kunt verbergen.
Stap 2
Maak de vereiste set CSS-richtlijnen. In zijn eenvoudigste vorm kan het er als volgt uitzien: button {display: none;} In dit geval zal de pagina niet alle buttons tonen die de… tag gebruiken.
Stap 3
Voeg een aanduiding toe aan de klassenaam in de instructies als u slechts één knop of een specifieke groep knoppen wilt verbergen. Noem bijvoorbeeld zo'n klasse HideBtns en voeg deze naam toe aan het CSS-statement: button. HideBtns {display: none;} Voeg het class attribuut toe aan de gewenste knop in de HTML-code van de pagina en geef deze de waarde HideBtns: hidden button
Stap 4
Pas de eigenschap display met de waarde none toe op het bovenliggende element als u bijvoorbeeld niet alleen de knop wilt verbergen, maar ook andere elementen van het webformulier. Het formulier wordt beschouwd als de "ouder" van alle elementen die tussen de en tags worden geplaatst. Bijvoorbeeld:
Hier worden een tekstveld en een knop voor het indienen van de ingevoerde waarde in het formulier geplaatst. Het formulier is toegewezen aan een klasse met de naam HideForm, dus om zowel het invoerveld als de knop te verbergen, moet u de CSS-verklaring als volgt wijzigen: form. HideForm {display: none;}
Stap 5
Plaats de voorbereide code in het bovenstaande voorbeeld in de kop van het webdocument (tussen de en tags). Om de browser van de bezoeker te vertellen dat dit CSS-code is, moet deze worden ingesloten tussen de HTML-stijltags voor het openen en sluiten:
button. HideBtns {weergave: geen;}
