Hvordan Sett inn en DIV i CSS Javascript

January 10

Du har kanskje sett den spennende "Div Insertion" lure mens du surfer på nettet. Utviklere lage denne effekten ved å bruke Cascading Style Sheets (CSS) til å lage usynlige elementer synlig eller opprette nye fra grunnen av. En div er et HTML-element som inneholder andre elementer som knapper og tekst. Ved å lære å lage div-elementer i sanntid og sette dem inn på en side, kan du legge til et nytt nivå av interaktivitet til eksisterende webapplikasjoner.

Bruksanvisning

1 Åpne Notepad eller HTML-editor og skape en ny HTML-dokument.

2 Legg til følgende HTML til dokumentets "<body>" -delen:

Dette skaper en tekstboks der id er "Textbox1." Den setter også en knapp på siden brukte for å teste Javascript-funksjonen som legger en ny div.

3 Legg dette tom "<script>" -delen til dokumentets "<head>" -delen:

</ Script>

4 Lim inn følgende Javascript-koden før den avsluttende "</ script>" tag:

Var targetElementID = "Textbox1";

Var newDivCSS = "width: 100px; height: 100px; padding: 10px; color: red; background-color: gul; border-style: prikket; border-width: 2px;";

Var newDivHTML = "Dette er en ny div";

Var insertionPoint = "før";

Den første variabelen inneholder "id" på siden element rundt som du vil sette inn en ny div. I dette eksempelet er at id "Textbox1." Den "newDivCSS" variable holder CSS beskrivelser som bestemmer hvordan den nye div vil se. Den neste variabelen "newDivHTML" holder HTML som du vil skal vises i div. Dens verdi i dette eksempel er "Dette er en ny div." Erstatt denne teksten med noe du liker. De siste variable kontroller der leseren setter inn de nye div. Dens mulige verdier er "før" og "etter".

5 Legg til Javascript-funksjonen etter koden beskrevet i forrige trinn:

fungere insertDiv () {

targetElement = document.getElementById (targetElementID);

Var newDivElement = document.createElement ( 'div');

newDivElement.setAttribute ( "id", "NewDiv1");

newDivElement.setAttribute ( "stil", newDivCSS);

newDivElement.innerHTML = newDivHTML;

newDivElement.setAttribute ( "innerhtml", newDivHTML);

if (insertionPoint == "før")

document.body.insertBefore (newDivElement, targetElement);

ellers

targetElement.appendChild (newDivElement);

}

Denne funksjonen lager en ny div ved hjelp av "createElement" -metoden og legger den til målelementet er angitt i "targetElementID" variable beskrevet i det foregående trinn.

6 Lagre HTML-dokument, og åpne den i en nettleser. Tekstboksen og knappen vises. Klikk på knappen. Javascript-funksjonen går og setter inn en ny div før tekstboksen.

Hint

Den innsatte div har en gul bakgrunn og rød tekst. Dette er verdier som er tilordnet CSS egenskaper i "newDivCSS" variable. Endre disse verdiene til noe du liker å style den nye div henhold til dine behov. Endre verdien av "insertionPoint" variabel fra "før" til "etter" for å sette inn nye div etter tekstboksen.