Come inserire elementi con DIV in JavaScript

February 16

Come inserire elementi con DIV in JavaScript


JavaScript fornisce ai programmatori gli strumenti per modificare il quadro invisibile di una pagina web noto come il Document Object Model (DOM). Il DOM è l'interfaccia di programmazione delle applicazioni di HyperText Markup Language (HTML). Il metodo JavaScript getElementById () può accedere alla pagina di divisione tag "div" per aggiungere o modificare le informazioni styling HTML come sfondi, font, bordi, larghezze e posizionamento. Inoltre, la proprietà innerHTML può cambiare il contenuto tra tag <div> </ div>. tag HTML devono essere etichettati con un ID prima che il metodo getElementById () può trovare e accedervi.

istruzione

1 Avviare l'applicazione editor di testo standard è disponibile sul computer.

2 Inserire il codice seguente nel editor di testo:

<Html>

<Head>

<Style type = "text / css"> <! -

interno {

width: 200px;

Altezza: 20px;

background-color: red;

colore bianco;

font-size: 15px;

text-align: right;

}

-> </ Style>

<Script language = "javascript">

funzione changeDiv () {

document.getElementById ( "interna") style.width = "500px.";

. Document.getElementById ( "interna") style.height = "220px";

. Document.getElementById ( "interna") style.fontSize = "62px";

. Document.getElementById ( "interna") style.textAlign = "center";

. Document.getElementById ( "interna") style.backgroundColor = "# FFB3B3";

. Document.getElementById ( "interna") style.border = "4px tratteggiata rossa";

. Document.getElementById ( "interna") style.color = "nero";

document.getElementById ( "interna") innerHTML = "JavaScript può inserire elementi di stile e contenuto in un Div.";

. Document.getElementById ( "myButton") value = "e funziona!";

}

</ Script>

</ Head>

<Body>

<Div id = "interno"> qui è la rossa div </ div>

<Input id = tipo "myButton" = "button" onclick = "changeDiv ()" value = "Fare clic su questo pulsante per inserire nuove informazioni in rosso div sopra" />

</ Body>

</ Html>

3 Fare clic sul menu File. Selezionare l'opzione "Salva". Salvare sotto il nome del file "test.html."

4 Avviare il browser web che è disponibile sul computer. Fare clic sulla voce di menu "File" e selezionare "Apri file".

5 Individuare il file "test.html" appena creata, selezionare con il mouse, quindi cliccare su "Apri".

6 Fare clic sul pulsante "clic su questo pulsante per inserire nuovi Informazioni in rosso Div Sopra."

Consigli e avvertenze

  • Il codice JavaScript può essere posizionato in qualsiasi punto tra il "<head> </ head>" e "<body> </ body>" tag. Per il codice che deve essere eseguito automaticamente all'interno del corpo, il codice deve essere inserito prima che gli elementi HTML è destinato ad agire su. Nell'esempio uno, il codice JavaScript modifica il div con l'etichetta "interiore". Nel esempio due, il codice JavaScript eseguito, ma non cambia nulla. Intenzionalmente posizionare il codice JavaScript per garantire i risultati desiderati.
  • esempio uno
  • <Div id = "interno"> qui è la rossa div </ div>
  • <Script type = "text / javascript">
  • document.getElementById ( "interna") style.width = "500px.";
  • . Document.getElementById ( "interna") style.backgroundColor = "grigio";
  • </ Script>
  • esempio due
  • I principali browser Web sarà visualizzata valido codice HTML e CSS in modo diverso. Anche le diverse versioni dello stesso browser possono produrre problemi di visualizzazione imprevisti. Verificare sempre il codice su diversi browser e le versioni precedenti dello stesso browser al fine di garantire le opere di codice come previsto.