Sobes.tech
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-ების გამოყენება ცალკეულ ელემენტებზე — სტანდარტული პრაქტიკაა.