Junior
როგორ დგინდება, რომ ყველა ელემენტს აქვს ერთნაირი თვისებები, როგორიცაა კლასი და იდენტიფიკატორი?
sobes.tech AI
პასუხი AI-სგან
კლასები (class) და იდენტიფიკატორები (id) HTML ატრიბუტებია, რომლებიც საშუალებას აძლევენ აირჩიოთ ელემენტები სტილიზაციისთვის CSS-ის საშუალებით და ურთიერთქმედებისთვის JavaScript-ის საშუალებით:
კლასი:
- შეიძლება მიენიჭოს ** რამდენიმე ** HTML ელემენტს;
- გამოიყენება ელემენტების ჯგუფის შესაქმნელად, რომლებიც აქვთ საერთო ვიზუალური ან ქცევითი თვისებები;
- CSS სელექტორში კლასი იწყება წერტილით (
.), მაგალითად:.my-class; - JavaScript-ში ელემენტები ირჩევა კლასიით
getElementsByClassNameანquerySelectorAllმეთოდებით;
იდენტიფიკატორი:
- უნდა იყოს უნიკალური მთელი HTML გვერდის ფარგლებში;
- გამოიყენება კონკრეტული ელემენტის იდენტიფიკაციისთვის;
- CSS სელექტორში იდენტიფიკატორი იწყება ჰეშით (
#), მაგალითად:#my-id; - JavaScript-ში ელემენტი ირჩევა ID-ით
getElementByIdმეთოდით;
მაგალითი:
<div class="card">
<p>ბარათის ტექსტი 1</p>
</div>
<div class="card">
<p>ბარათის ტექსტი 2</p>
</div>
<button id="myButton" class="btn">ღილაკი</button>
.card { /* სტილიზაცია ყველა `card` კლასის ელემენტისთვის */
border: 1px solid grey;
padding: 10px;
margin-bottom: 10px;
}
#myButton { /* სტილიზაცია მხოლოდ `myButton` ID-ის ელემენტისთვის */
background-color: blue;
color: white;
}
.btn { /* საერთო სტილები ყველა ღილაკისთვის */
padding: 8px 16px;
cursor: pointer;
}
// ყველა `card` კლასის ელემენტის მიღება
const cards = document.getElementsByClassName('card');
// `myButton` ID-ის ელემენტის მიღება
const button = document.getElementById('myButton');
// ღილაკზე კლიკის მოვლენის დამატება
if (button) {
button.addEventListener('click', () => {
alert('ღილაკი დაჭერილია!');
});
}
კლასები და იდენტიფიკატორები HTML ელემენტების ატრიბუტებია და პირდაპირ მითითებულიაmarkup-ში. ეს საშუალებას აძლევს მათ გამოყენებას სტილიზაციის (CSS-ის საშუალებით) და ქცევის მართვის (JavaScript-ის საშუალებით) მიზნით. კლასების გამოყენება მსგავს ელემენტებზე და უნიკალური ID-ების გამოყენება ცალკეულ ელემენტებზე — სტანდარტული პრაქტიკაა.