Ετικέτα HTML <details>

  • Προηγούμενη Σελίδα <del>
  • Επόμενη Σελίδα <dfn>

Ορισμός και χρήση

<details> Ετικέτα που ορίζει άλλες λεπτομέρειες που ο χρήστης μπορεί να ανοίξει και να κλείσει κατά βούληση.

<details> Ετικέτα που χρησιμοποιείται συνήθως για τη δημιουργία μικρών αλληλεπιδραστικών στοιχείων που ο χρήστης μπορεί να ανοίξει και να κλείσει. Εξ ορισμού, τα στοιχεία είναι κλειστά. Όταν ανοίγουν, επεκτείνονται και εμφανίζουν το περιεχόμενό τους.

Οποιοδήποτε τύπος περιεχομένου μπορεί να τοποθετηθεί <details> ετικέτα.

Σημείωση:<summary> ετικέτα με <details> Συνδυάζοντας, μπορείτε να καθορίσετε έναν ορατό τίτλο για τις λεπτομέρειες. Όταν ο χρήστης κάνει κλικ στον τίτλο, θα εμφανιστεί <details> Ορίζει το περιεχόμενο που ορίζεται.

Δείτε επίσης:

Εγχειρίδιο HTML DOMΌνειρο Οντότητας

Παράδειγμα

Παράδειγμα 1

Ορίστε λεπτομέρειες που ο χρήστης μπορεί να ανοίξει και να κλείσει κατά βούληση:

<details>
  <summary>Μελλοντικό Κέντρο Παγκόσμιας Κέντρου (Epcot Center)</summary>
  <p>Epcot είναι ένα θέμα πάρκου στο Walt Disney World Resort με συναρπαστικές θέσεις, διεθνείς εκθέσεις, κερδισμένες φωταγώγους και 季节licheν activities.</p>
</details>

Δοκιμάστε το προσωπικά

Παράδειγμα 2

Χρησιμοποιήστε το CSS για να ρυθμίσετε τα στυλ των <details> και <summary>:

<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>Μελλοντικό Κέντρο Παγκόσμιας Κέντρου (Epcot Center)</summary>
  <p>Epcot είναι ένα θέμα πάρκου στο Walt Disney World Resort με συναρπαστικές θέσεις, διεθνείς εκθέσεις, κερδισμένες φωταγώγους και 季节licheν activities.</p>
</details>
</body>
</html>

Δοκιμάστε το προσωπικά

Ιδιότητα

Ιδιότητα Τιμή Περιγραφή
open open Ορίζει ότι οι λεπτομέρειες πρέπει να είναι ορατές στον χρήστη (ανοιχτές).

Παγκόσμιες ιδιότητες

<details> Η ετικέτα υποστηρίζει επίσης Οι παγκόσμιες ιδιότητες στο HTML.

ιδιότητες συμβάντος

<details> Η ετικέτα υποστηρίζει επίσης Η ιδιότητα συμβάντος στο HTML.

Προεπιλεγμένα CSS ρυθμίσεις

Οι περισσότεροι περιηγητές θα χρησιμοποιήσουν τις ακόλουθες προεπιλεγμένες τιμές για την προβολή <details> Στοιχείο:

details {
  display: block;
}

Υποστήριξη περιηγητών

Τα αριθμήματα στη τάβλη αναφέρουν την έκδοση του πρώτου περιηγητή που υποστηρίζει το στοιχείο.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
12.0 79.0 49.0 6.0 15.0
  • Προηγούμενη Σελίδα <del>
  • Επόμενη Σελίδα <dfn>