X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

HTML-Tag <meter>

Das Tag <meter> bestimmt den Skalar im selben Ausmaß oder die grafische Darstellung der Bruchzahl. Das Tag kann verwendet werden, wenn es notwendig ist, zum Beispiel die Batterieladung in Prozent, den Flüssigkeitsumfang, Anteil der Bevölkerung, Stimmrecht usw. anzuzeigen. Für den Gebrauch des Tages <meter> muss der maximale Wert bekannt sein.

Das Tag <meter> wird für die Bestimmung von Progressindicator nicht verwendet. Für diesen Zweck wird das Tag <progress> verwendet.

Syntax

Das Tag <meter> wird gepaart verwendet, der Endtag ist obligatorisch.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <meter value="4" min="0" max="10">4 из 10</meter> 4 von 10<br>
    <meter value="0.75">75%</meter> 75%
  </body>
</html>

Ergebnis

Verwenden Sie die CSS-Eigenschaften background-color, box-shadow, width und height, um das Element <progress> zu stylen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      progress[value] {
        -webkit-appearance: none;
        appearance: none;
        width: 220px;
        height: 20px;
      }
      progress[value]::-webkit-progress-bar {
        background-color: #eee;
        box-shadow: 0 0 3px #666 inset;
      }
      progress[value]::-webkit-progress-value {
        background: -webkit-linear-gradient(-45deg, transparent 30%, #8ebf42 70%, #8ebf42 40%, transparent 30%),
        -webkit-linear-gradient(top, #96f204, #8ebf42),
        -webkit-linear-gradient(right, #96f204, #8ebf42);
        background-size: 40px 20px,  10%;
      }
    </style>
  </head>
  <body>
    <p>Herunterladen:
      <progress value="35" max="100"></progress>
      <span>35%</span>
    </p>
    <p>Fortschrittsanzeige:
      <progress value="80" max="100"></progress>
      <span>80%</span>
    </p>
  </body>
</html>

Ergebnis

Attribut

Attribut Wert Beschreibung
form form_id Es bestimmt die Form (Formen), zu der das Tag <meter> gehört.
high number Es definiert die großen Werte (aber nicht maximale). Wenn der Wert von high kleiner ist als der Wert von low, bedeutet das, dass high = low. Wenn high größer ist als max, bedeutet das, dass high = max.
low number Es definiert die kleinen Werte (aber nicht minimale). Dieser Wert muss kleiner sein als high. Wenn der Wert von low kleiner ist als der Wert von min, bedeutet das, dass low = min.
max number Es bestimmt den maximal möglichen Wert. Voreingestellt ist der Wert 1.
min number Es bestimmt den minimal möglichen Wert. Voreingestellt ist der Wert 0.
optimum number Es definiert die optimale Zahl, die innerhalb des Ausmaßes sein muss, und mit den Attributen min und max bestimmt wird.
Es kann groß sein als der Wert von high.
Die Farbe hängt von der Lage von optimum ab:
Rot: min ≤ optimum < low
Gelb: low ≤ optimum ≤ high
Grün: high < optimum ≤ max
value number Es definiert den aktuellen Wert, der innerhalb des Ausmaßes, der mit den Attributen min und max bestimmt wird. Es ist einobligatorisches Attribut.

Das Tag <meter> unterschtützt Globale Attribute und Globale Eventhandler.


Browser-Support

8+ 6+ 6+ 11+


Finden Sie das nützlich?

Ähnliche Artikel