Junior
Cum se dovedește că toate elementele au aceleași proprietăți, cum ar fi clasa și identificatorul?
sobes.tech AI
Răspuns de la AI
Clase (class) și identificatori (id) sunt atribute HTML care permit selectarea elementelor pentru stilizare prin CSS și interacțiune prin JavaScript.
Clasă:
- Poate fi atribuită mai multor elemente HTML.
- Este folosită pentru gruparea elementelor care au caracteristici vizuale sau comportamentale comune.
- În CSS, selectorul de clasă începe cu punct (
.), de exemplu:.clasa-mea. - În JavaScript, elementele după clasă sunt selectate cu metodele
getElementsByClassNamesauquerySelectorAll.
Identificator:
- Trebuie să fie unic în întreaga pagină HTML.
- Este folosit pentru identificarea unui anumit element.
- În CSS, selectorul de identificator începe cu semnul
#, de exemplu:#id-ul-meu. - În JavaScript, elementul după ID este selectat cu metoda
getElementById.
Exemplu:
<div class="card">
<p>Textul cardului 1</p>
</div>
<div class="card">
<p>Textul cardului 2</p>
</div>
<button id="butonulMeu" class="btn">Buton</button>
.card { /* Stilizare pentru toate elementele cu clasa "card" */
border: 1px solid grey;
padding: 10px;
margin-bottom: 10px;
}
#butonulMeu { /* Stilizare doar pentru elementul cu ID "butonulMeu" */
background-color: blue;
color: white;
}
.btn { /* Stiluri comune pentru toate butoanele */
padding: 8px 16px;
cursor: pointer;
}
// Obține toate elementele cu clasa "card"
const carduri = document.getElementsByClassName('card');
// Obține elementul cu ID "butonulMeu"
const buton = document.getElementById('butonulMeu');
// Adaugă un handler pentru evenimentul de click pe buton
if (buton) {
buton.addEventListener('click', () => {
alert('Butonul a fost apăsat!');
});
}
Atât clasele, cât și identificatorii sunt atribute HTML și sunt setate direct în marcaj. Acest lucru le permite să fie folosite pentru stilizare (prin CSS) și controlul comportamentului (prin JavaScript). Utilizarea claselor pentru elemente similare și a ID-urilor unice pentru elemente individuale este o practică standardă.