În această lecție vom analiza proprietățile unui element (nod) cu care puteți gestiona diferitele sale atribute: id. clasă. din titlu. lang. tabindex. dir și altele.
Elemente de proprietate destinate accesării atributelor sale
Pentru a lucra cu atribute, puteți utiliza nu numai metodele getAttribute (). setAttribute () și removeAttribute (). dar și proprietățile ale căror nume repetă numele proprietăților corespunzătoare. Aceste proprietăți pot fi folosite nu numai pentru a citi valorile atributelor corespunzătoare, dar și pentru a le modifica valorile.
Proprietatea className
Proprietatea className vă permite să setați sau să obțineți clasa (clasele) elementului (valoarea atributului de clasă).
Pentru ca elementul să instaleze mai multe clase, ele trebuie separate de un spațiu.
1. Obțineți numele clasei primului element p (index 0) în document:
2. Suprascrieți elementul care are id = "myID". numele de clasă existent cu o nouă valoare:
3. Adăugați o clasă suplimentară la element (fără suprascrierea valorilor existente):
4. Editați elementul care are id = "myID" și clasa myStyle. dimensiune font:
Proprietatea elementului id
Proprietatea id vă permite să setați sau să preluați elementul id (valoarea atributului id) din element.
Valoarea atributului id trebuie să fie unică pe pagină. Pentru a obține un element într-un document HTML, id-ul său utilizează de obicei metoda getElementById ().
De exemplu, pentru un element care are identificatorul ID-ul meu. modificați valoarea atributului id:
De exemplu, trimiteți la consola identificatorii tuturor elementelor p din document:
Proprietatea elementului de titlu
Proprietatea titlului setează sau returnează valoarea atributului de titlu al elementului. Atributul titlu este utilizat în mod obișnuit pentru un set de informații suplimentare, care este afișat ca un tooltip.
De exemplu, modificați titlul unui element care are id = "myP":
Proprietatea lang a elementului
Proprietatea lang stabilește sau returnează valoarea atributului lang al elementului. Atributul lang este folosit pentru a specifica limba în care este scris textul din interiorul elementului.
De exemplu, setați toate elementele p din document lang = "ru":
Proprietatea tabIndex
Proprietatea tabIndex stabilește sau returnează valoarea atributului tabindex al elementului. Atributul tabindex specifică ordinea în care elementele sunt transmise când butonul tab este apăsat.
De exemplu, setați comanda de tranziție pentru elementele lui a, așa cum apar în cod:
Proprietatea elementului dir
Proprietatea dir setează sau returnează valoarea atributului dir al elementului. Atributul dir este folosit pentru a specifica direcția textului în element. În plus față de atributul dir. De asemenea, puteți utiliza proprietatea style.direction. Pentru a seta sau a obține direcția textului în element.
dir proprietate poate lua una dintre următoarele trei valori: LTR (implicit) - direcția textului în elementul de la stânga la dreapta, rtl - direcția textului în elementul de la dreapta la stânga, auto - permite browser-ul pentru a gestiona direcția textului în elementul (browser-ul stabilește direcția textului în elementul, în funcție din conținutul său). Pentru a seta „auto“ valoare este recomandată numai în cazul în care conținutul elementului nu este cunoscut în prealabil.
De exemplu, obțineți direcția textului pentru elementul p. care are id = "myP":
De exemplu, modificați direcția textului elementului p. care are id = "myP":
Proprietăți pentru gestionarea atributelor care există numai pentru anumite tipuri de elemente
De exemplu, elementul (nodul) img. cu excepția ID-ului comun al proprietăților. ClassName. din titlu. care au cele mai multe elemente, există alte specifice proprietățile obiectului: src (imaginea sursă), lățimea (lățimea imaginii), înălțimea (înălțimea imaginii), alt (text care va fi afișat în cazul în care imaginea nu este afișată sau afișajul său cu handicap în setările browserului etc.
În cele mai multe cazuri, numele unei proprietăți pentru a controla atributul unui element este același cu numele acelui atribut.
De exemplu, modificați lățimea și înălțimea unei imagini care are id = "myImg":
De exemplu, obțineți un link care are id = "myAnchor". valoarea atributului href. Afișați valoarea sa într-un element care are id = "myP":
De exemplu, setați elementul de intrare. care are id = "email". numai pentru citire.
- Modificați toate elementele unui document din document cu valoarea atributului țintă la "_blank";
- Ascundeți toate imaginile de pe o pagină care are o lățime mai mare de 600px.