Cum să extindeți și să restrângeți un DIV în JavaScript

Divs vă permit să grupați elemente pe o pagină Web. Există două moduri de a determina divizările pe o pagină Web să dispară. În primul rând, un cod face un div într-un element invizibil, sau puteți folosi restrângerea. Dacă pur și simplu faceți un div invizibil, un spațiu gol rămâne acolo unde div există. Colapsarea unui div elimină acel spațiu gol, fără a lăsa o "gaură" în pagina Web. Folosind JavaScript conectat la un buton, vă creați propriile Divizii care se restrâng și se extind atunci când utilizatorii dau clic pe butonul.

Adăugați div pe pagina web

Pasul 1
Lansarea Notepad și deschideți oricare dintre documentele dvs. HTML.

Pasul 2
Adăugați acest bloc de cod HTML în secțiunea "corp" al documentului:

Div text
Acest cod creează un div și un buton. Div conține un paragraf cu text care citește: "Text Div". Înlocuiți textul cu orice doriți. "Butonul" numește o funcție JavaScript când este făcută clic pe ea. Această funcție determină div să comute între o stare în colaps și o stare extinsă.
Localizați proprietățile "id" și "class" în eticheta div. Pentru a crea o div divizată și expandabilă, trebuie să dați valoarea div div. În acest exemplu, valoarea este "MyDiv". Div are de asemenea o proprietate de clasă. În acest caz, valoarea proprietății este "divVisible". Acesta este numele unei clase CSS definite în secțiunea următoare.

Adăugați clase CSS și JavaScript

Pasul 1
Adăugați următorul cod CSS în secțiunea "cap" a documentului: creează clasa "divVisible" și o altă clasă numită "divHidden". Clasa "divVisible" își stabilește valoarea afișată pentru a "bloca". Valoarea "bloc" face ca orice element HTML care face referință la clasă să fie vizibil și îl extinde pentru a ocupa spațiu pe pagina Web. Clasa "divHidden" își stabilește valoarea afișată la "none". Orice element HTML care se referă la această clasă se prăbușește și nu lasă spațiu în urmă.

Pasul 2
Adăugați acest cod JavaScript sub codul CSS: Variabila divID deține valoarea id a divului pe care doriți să îl restrângeți și să îl extindeți. Această valoare este "MyDiv". Restul codului obține numele curent al diviziei CSS a div și îl comută de fiecare dată când rulează codul. Prima dată când codul se execută, schimbă numele divului în clasă la "divHidden". A doua oară când rulează, schimbă numele clasei înapoi la "divVisible".

Pasul 3
Salvați documentul HTML și deschideți-l în browser. Se afișează paragraful care conține paragraful dvs.

Faceți clic pe butonul "Reduceți /Extindeți". Textul se prăbușește. Faceți clic din nou pe buton pentru a extinde textul. Rețineți modul în care butonul și alte elemente de sub text se mișcă atunci când textul se prăbușește și se mută în jos când textul se extinde
URL:https://ro.whycomputer.com/Internet/100506624.html