HTML-<details>-tagi

Määrittely ja käyttö

<details> tagi määrittelee muita yksityiskohtia, joita käyttäjä voi avata ja sulkea tarpeen mukaan.

<details> tagi käytetään yleensä luomaan käyttäjän voi avata ja sulkea interaktiivisia sovelluksia. Oletuksena sovellus on suljettu. Kun se avataan, se laajenee ja näyttää sisällön.

Mikä tahansa sisältötyyppi voidaan sijoittaa <details> tagissa.

Vinkki:<summary> -tagi ja <details> Yhdistettynä, voit määrittää näkyvän otsikon yksityiskohtia. Kun käyttäjä napsauttaa otsikkoa, näytetään: <details> Määritetty sisältö.

Katso myös:

HTML DOM -viittauskirja:Details-objekti

Esimerkki

Esimerkki 1

Määritä käyttäjän voi avata ja sulkea tarpeen mukaan yksityiskohtia:

<details>
  <summary>Tulevaisuuden maailman keskus (Epcot Center)</summary>
  <p>Epcot on Walt Disney World -lomakeskuksen teemapuisto, jossa on jännittäviä nähtävyyksiä, kansainvälisiä näyttelyitä, palkittuja pyroteknisiä esityksiä ja vuodenajasta riippuvia tapahtumia.</p>
</details>

Kokeile itse

Esimerkki 2

Aseta <details> ja <summary> -tyyliä CSS:llä:

<html>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}
details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
  <summary>Tulevaisuuden maailman keskus (Epcot Center)</summary>
  <p>Epcot on Walt Disney World -lomakeskuksen teemapuisto, jossa on jännittäviä nähtävyyksiä, kansainvälisiä näyttelyitä, palkittuja pyroteknisiä esityksiä ja vuodenajasta riippuvia tapahtumia.</p>
</details>
</body>
</html>

Kokeile itse

Ominaisuus

Ominaisuus Arvo Kuvaus
open open Määrittelee, että yksityiskohdat tulisi olla käyttäjän nähtävissä (avoin).

Globaalit ominaisuudet

<details> Tagi tukee myös HTML:n globaalit ominaisuudet.

tapahtumaoikeuksia

<details> Tagi tukee myös HTML:n tapahtumaoikeudet.

Oletusarvoiset CSS-asetukset

Useimmat selaimet näyttävät seuraavat oletusarvot <details> Elementti:

details {
  display: block;
}

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee elementtiä täysin.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
12.0 79.0 49.0 6.0 15.0