Qlobal sahənin atributları

8.1 id atributu

Qlobal sahə atributları — bu, istənilən HTML elementdə istifadə edilə bilən atributlardır. Onlar veb səhifə elementlərinin identifikasiyası, təsnifatı və idarəsində əsas rol oynayırlar.

id atributu səhifədə bir elementi unikal müəyyən etmək üçün istifadə olunur. id atributunun dəyəri bütün HTML sənədinin daxilində unikal olmalıdır. Bu atribut tez-tez CSS və JavaScript elementləri ilə əlaqə qurmaq üçün istifadə olunur.

Sintaksis:

    
      <element id="unique-id">...</element>
    
  

İstifadə nümunəsi:

    
      #header {
        background-color: #f4f4f4;
        padding: 10px;
      }
    
  

    
      <div id="header">
        <h1>Başlıq</h1>
      </div>
    
  

    
      document.getElementById('header').style.color = 'blue';
    
  

Üstünlüklər:

• Unikal identifikasiya: səhifədə elementləri tam dəqiqliklə müəyyən etməyə imkan verir
• Stilizasiya: CSS stillərinin tətbiqi üçün rahatdır
• DOM ilə manipulyasiya: JavaScript vasitəsilə elementlərə asanlıqla giriş imkanı yaradır

8.2 class atributu

class atributu elementə bir və ya bir neçə sinif təyin etmək üçün istifadə olunur. Bu siniflər CSS üslublarını tətbiq etmək və JavaScript vasitəsilə elementlərlə manipulyasiya etmək üçün istifadə edilə bilər. id ilə müqayisədə, class dəyərlərinin unikal olması tələb olunmur.

Sintaksis:

    
      <element class="class-1 class-2">...</element>
    
  

İstifadə nümunəsi:

    
      .highlight {
        background-color: yellow;
      }

      .bold {
        font-weight: bold;
      }
    
  

    
      <p class="highlight">Bu mətn sarı ilə seçilmişdir.</p>
      <p class="bold">Bu mətn qalındır.</p>
      <p class="highlight bold">Bu mətn həm qalındır, həm də sarı ilə seçilmişdir.</p>
    
  

Üstünlüklər:

• Çoxsaylı siniflər: bir element üçün bir neçə sinif təyin etməyə imkan verir
• Elementlərin qruplaşdırılması: elementlər qrupuna rahat şəkildə üslub tətbiq etməyə imkan verir
• DOM ilə manipulyasiya: JavaScript vasitəsilə elementlər qrupuyla rahat şəkildə işləməyə imkan verir

8.3 Data-* atributları

data-* atributları HTML elementlərində istifadəçi məlumatlarını saxlamağa imkan verir. Bu atributlar data- prefiksindən başlayır və istənilən qiyməti ala bilər. Çox vaxt bu məlumatlar JavaScript üçün faydalı ola biləcək informasiyaları saxlamaq üçün istifadə olunur.

Sintaksis:

    
      <element data-key="value">...</element>
    
  

İstifadə nümunəsi:

    
      <div data-user-id="12345" data-role="admin">
        ID-si 12345 olan istifadəçi, rolu - administrator.
      </div>
    
  

    
// Səhifədə data-user-id atributuna malik olan ilk elementi tapırıq
const userElement = document.querySelector('[data-user-id]');

// data-user-id atributunun qiymətini alırıq və console-a çıxarırıq
console.log(userElement.dataset.userId); // Nəticə: 12345

// data-role atributunun qiymətini alırıq və console-a çıxarırıq
console.log(userElement.dataset.role); // Nəticə: admin
    
  

Üstünlüklər:

• Məlumatların saxlanması: elementlərlə əlaqəli məlumatların saxlanması və ötürülməsi üçün rahatdır
• JavaScript vasitəsilə giriş: dataset API vasitəsilə məlumatlara asanlıqla giriş və dəyişiklik etmək mümkündür
• Çeviklik: HTML standartını pozmadan istənilən məlumatı əlavə etməyə imkan verir