Kuidas määrata, et kõigil elementidel on samad omadused, näiteks klass ja identifikaator?

Klassid (class) ja identifikaatorid (id) on HTML atribuudi, mis võimaldavad valida elemente stiilimiseks CSS-i kaudu ja interaktiivseks JavaScripti kaudu:

Klass:

• võib olla määratud mitmele HTML elemendile;
• kasutatakse elementide rühmitamiseks, millel on ühised visuaalsed või käitumuslikud omadused;
• CSS-selektoris algab klass punktist (.), näiteks: .my-class;
• JavaScriptis valitakse elemendid klassi järgi getElementsByClassName või querySelectorAll meetoditega;

Identifikaator:

• peab olema unikaalne kogu HTML-lehel;
• kasutatakse ühe konkreetse elemendi identifitseerimiseks;
• CSS-selektoris algab identifikaator hashmärgist (#), näiteks: #my-id;
• JavaScriptis valitakse element ID järgi getElementById meetodiga;

Näide:

  <div class="card">
      <p>Kaardi tekst 1</p>
  </div>
  <div class="card">
      <p>Kaardi tekst 2</p>
  </div>
  <button id="myButton" class="btn">Nupp</button>

  .card { /* Stiil kõigile `card` klassi elementidele */
      border: 1px solid grey;
      padding: 10px;
      margin-bottom: 10px;
  }

  #myButton { /* Stiil ainult `myButton` ID-ga elemendile */
      background-color: blue;
      color: white;
  }

  .btn { /* Üldised stiilid kõigile nuppudele */
      padding: 8px 16px;
      cursor: pointer;
  }

  // Kõigi `card` klassi elementide saamine
  const cards = document.getElementsByClassName('card');

  // `myButton` ID-ga elemendi saamine
  const button = document.getElementById('myButton');

  // Kliki sündmuse lisamine nupule
  if (button) {
      button.addEventListener('click', () => {
          alert('Nupp on vajutatud!');
      });
  }

Klassid ja identifikaatorid on HTML elementide atribuudid ning määratakse otse markupis. See võimaldab neid kasutada stiilimiseks (CSS kaudu) ja käitumise juhtimiseks (JavaScript kaudu). Klasside kasutamine sarnaste elementide jaoks ja unikaalsete ID-de kasutamine eraldi elementide jaoks on standardpraktika.