Hvordan lage en knapp synlig i Javascript

Hvordan lage en knapp synlig i Javascript


Javascript Document Object Model, eller DOM lar webutviklere å finne, komme til og manipulere nettsiden objektattributter. Når Javascript brukes for å identifisere et objekt referanse, typisk ved hjelp av sin id, det kan endre siktegenskaper, størrelse attributter, fonter og mer. Javascript er ikke begrenset til ombygging av individuelle objekter; gjennom bruk av gjennomgripende stilark og Javascript DOM, kan utviklere endre hele nettsider på fly, å lage dynamiske websider som reagerer på et bredt spekter av brukerinteraksjon.

Bruksanvisning

1 Åpne en teksteditor og opprette en ny fil med navnet showButton.html. Den typiske prosessen for å lage en ny fil i en tekst editor er å velge "Ny" fra "Fil" -menyen.

2 Legg til følgende HTML-koder til showButton.html: "<html>", "<head>", "</ head>", "<body>", "</ body>" og "</ html>". Sammen utgjør disse kodene omfatter en grunnleggende nettside.

<Html>
<Head> </ head>
<Body> </ body>
</ Html>

3 Legg en "<input>" tag til showButton.html, plassere koden mellom "<body>" og "</ body>" koder. Gi innspill tag en "type" attributt "send", en "id" attributt "invisiButton", en "verdi" attributt "Jeg er synlig" og en "stil" attributt "visibility: hidden".

<Input type = "submit" id = "invisiButton" value = "Jeg er synlig" style = "visibility: hidden;">

4 Legg en andre "<input>" tag til showButton.html umiddelbart etter den første "<input>" tag. Gi denne inngangen tag en "type" attributt "send", en "verdi" attributt "Klikk her for å lage den første knappen Visible", en "id" attributt "showButton" og bruke en "onClick ()" Javascript begivenhet å ringe "visibleButton" -funksjon.

<Input type = "submit" value = "Klikk for å gjøre den første knappen synlig" id = "shownButton" onclick = "visibleButton ()">

5 Legg til en Javascript "<script>" skilletegn og en Javascript-funksjon som heter "visibleButton" mellom showButton.html er "<head>" og "</ head>" koder. Følg funksjonen erklæring med to klammeparentes ( "{}") for å indikere funksjonskoden plassering. Lukk Javascript "</ script>" skilletegn.

<Script type = "text / javascript">
funksjon visibleButton () {}
</ Script>

6 Deklarere en variabel som heter "buttonToShow" inne i visibleButton funksjonens klammeparentes. Bruk "getElementById" Javascript-metoden for å hente elementet med id "invisiButton".

Var buttonToShow = document.getElementById ( "invisiButton");

7 Sett "buttonToShow" element stil og synlighet attributter til "synlig". Etter trinn 7, vil showButton.html ut som vist nedenfor. Lagre og lukk showButton.html.

<Html>
<Head>
<Script type = "text / javascript">
fungere visibleButton () {
Var buttonToShow = document.getElementById ( "invisiButton");
buttonToShow.style.visibility = "synlig";
}
</ Script>
</ Head>
<Body>
<Input type = "submit" id = "invisiButton" value = "Jeg er synlig" style = "visibility: hidden;">
<Input type = "submit" value = "Klikk for å gjøre den første knappen synlig" id = "shownButton" onclick = "visibleButton ()">
</ Body>
</ Html>

8 Åpne showButton.html i en nettleser. Klikk på "Klikk for å gjøre den første knappen synlig" -knappen, og kontroller at "invisiButton" -knappen vises.

Hint

  • Skjulte elementer kan også synliggjøres ved hjelp av "display: block" attributt. I motsetning til synlighet: skjult, display: block holder ikke et element plass i oppsettet.
  • Den "visibility: hidden" eiendom er faktisk en CSS eiendom. Det finnes hundrevis av egenskaper som kan brukes til elementer i Web-sider.
  • Hele grupperinger av Web sideelementer kan skjules og vises, slik at utviklere å fullstendig endre oppsett uten å kreve en side refresh.
  • Skjule og vise elementer i Web-sider kan være distraherende for brukerne. Sørg for å endre et element synlighet bare hvis det er fornuftig å gjøre det innenfor rammen av den generelle websiden layout.