Junior
Чӣ тавр муайян кардан мумкин аст, ки ҳама унсурҳо хусусиятҳои якхела доранд, масалан синф ва шенасоии?
sobes.tech AI
Ҷавоб аз AI
Кластар (class) ва идентификаторлар (id) HTML атрибутлардир, улар CSS орқали стилизация қилиш ва JavaScript орқали ўзаро таъсир қилиш учун элементларни танлаш имконини беради.
Класс:
- Кўплаб HTML элементларига тайинланиши мумкин.
- Умумий визуал ёки хулқ-атвор хусусиятларига эга элементларни гуруҳлаш учун қўлланилади.
- CSSда класс селектори нуқта (
.) билан бошланади, масалан:.менинг-класс. - JavaScriptда, класс бўйича элементлар
getElementsByClassNameёкиquerySelectorAllметодлари билан танланади.
Идентификатор:
- Ҳамма HTML саҳифасида ягона бўлиши керак.
- Аниқ бир элементни идентификация қилиш учун қўлланилади.
- CSSда идентификатор селектори хеш (
#) билан бошланади, масалан:#менинг-id. - JavaScriptда, ID бўйича элемент
getElementByIdметоди билан танланади.
Масал:
<div class="карта">
<p>Карта матни 1</p>
</div>
<div class="карта">
<p>Карта матни 2</p>
</div>
<button id="менингТугма" class="btn">Тугма</button>
.карта { /* Барча "карта" класига тегишли элементларни стилилаш */
border: 1px solid grey;
padding: 10px;
margin-bottom: 10px;
}
#менингТугма { /* Фақат ID "менингТугма" бўлган элементни стилилаш */
background-color: blue;
color: white;
}
.btn { /* Ҳамма тугмалар учун умумий стильлар */
padding: 8px 16px;
cursor: pointer;
}
// "карта" класига тегишли барча элементларни олиш
const карталар = document.getElementsByClassName('карта');
// ID "менингТугма" бўлган элементни олиш
const тугма = document.getElementById('менингТугма');
// Тугмага босиш ҳодисасини қўшиш
if (тugма) {
тугма.addEventListener('click', () => {
alert('Тугма босилди!');
});
}
Ҳам класслар, ҳам идентификаторлар HTML атрибутлар бўлиб, улар тўғридан-тўғри markupда белгиланади. Бу улардан CSS орқали стилизация қилиш ва JavaScript орқали хулқ-атворни бошқариш учун фойдаланиш имконини беради. Ўхшаш элементлар учун класслар ва алоҳида элементлар учун ягона IDлар ишлатиш одатдаги амалиётдир.