HTML luokan ominaisuus

Määrittely ja käyttö

class Ominaisuus määrittää elementin luokan nimen (classname).

class Ominaisuus käytetään pääasiassa osoittamaan tyyliarkiston luokille (class). Sitä voidaan kuitenkin käyttää myös JavaScriptin (HTML DOM) avulla muuttamaan määritellyllä luokalla varustettuja HTML-elementtejä.

Katso myös:

HTML -opetusHTML - ominaisuudet

CSS -opetusCSS - syntaksi

CSS -viittausoppikirja:CSS .class - valitsin

HTML DOM -viittausoppikirja:HTML DOM getElementsByClassName() -menetelmä

HTML DOM -viittausoppikirja:HTML DOM className-ominaisuus

HTML DOM -viittausoppikirja:HTML DOM classList-ominaisuus

HTML DOM -viittausoppikirja:HTML DOM Style - objekti

Esimerkki

Esimerkki 1

Käytä class-ominaisuutta HTML-dokumentissa:

<html>
<head>
<style>
h1.intro {
  color: blue;
}
p.important {
  color: green;
}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Huomaa, että tämä on tärkeä kappale。:）</p>
</body>
</html>

Kokeile itse

Lisää esimerkkejä sivun alasta.

Syntaksi

<element class="classname">

Ominaisuusarvo

Arvo Kuvaus
classname

Määritä yhden tai useamman elementin luokan nimi.

Jos haluat määrittää useita luokkia, erottele ne välilyönnillä.

Tämä mahdollistaa useiden CSS-luokkien yhdistämisen HTML-elementille.

Esimerkiksi:<span class="left important">

Nimeämisohjeet:

  • Täytyy aloittaa kirjaimella A-Z tai a-z
  • Voivat olla: kirjaimet (A-Za-z), numerot (0-9), viiva ("-") ja alaviiva ("_")

Lisää esimerkkejä

Esimerkki 2

Lisää useita luokkia HTML-elementille:

<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
  color: blue;
  text-align: center;
}
.important {
  background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">Otsikko 1</h1>
<p>Yksi kappale.</p>
</body>
</html>

Kokeile itse

Esimerkki 3

Lisää keltainen taustaväri ensimmäiselle class="example"-elementille (indeksi 0) JavaScriptilla.

let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";

Kokeile itse

Esimerkki 4

Lisää "mystyle"-luokka id:nä "myDIV" omaava elementti JavaScriptilla:

document.getElementById("myDIV").classList.add("mystyle");

Kokeile itse

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki