log()
Baseline
2023
Newly available
Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die log() CSS Funktion ist eine exponentielle Funktion, die den Logarithmus einer Zahl zurückgibt.
Ein Logarithmus ist das Inverse der Exponentiation. Es ist die Zahl, zu der eine feste Basis potenziert werden muss, um die Zahl zu ergeben, die als erstes Parameter übergeben wird.
In CSS wird, wenn ein einzelner Parameter übergeben wird, der natürliche Logarithmus e verwendet, der ungefähr 2.7182818 beträgt, obwohl die Basis mit einem optionalen zweiten Parameter auf jeden Wert gesetzt werden kann.
Syntax
/* A <number> value */
width: calc(100px * log(7.389)); /* 200px */
width: calc(100px * log(8, 2)); /* 300px */
width: calc(100px * log(625, 5)); /* 400px */
Parameter
Die log(value [, base]?) Funktion akzeptiert zwei kommagetrennte Werte als Parameter.
value-
Eine Berechnung, die sich in ein
<number>größer oder gleich 0 auflöst. Sie repräsentiert den Wert, von dem der Logarithmus genommen werden soll. base-
Optional. Eine Berechnung, die sich in ein
<number>größer oder gleich 0 auflöst. Sie repräsentiert die Basis des Logarithmus. Wenn nicht definiert, wird die standardmäßige logarithmische Basiseverwendet.
Rückgabewert
Der Logarithmus von value, wenn base definiert ist.
Der natürliche Logarithmus (Basis e) von value, wenn base nicht definiert ist.
Formale Syntax
<log()> =
log( <calc-sum> , <calc-sum>? )
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> =
<calc-value> [ [ '*' | / ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
Beispiele
Verwendung der log() Funktion auf einer logarithmischen Skala
Dieses Beispiel zeigt, wie die log() Funktion verwendet werden kann, um Datenwerte durch die Verwendung einer logarithmischen Skala zu visualisieren. Die Breite jedes Balkens in diesem Beispiel entspricht seinem Datenwert auf einer logarithmischen Skala mit Basis 10. Auf jedem Element wird sein Wert einer CSS benutzerdefinierten Eigenschaft namens --value zugewiesen, die dann von der .bar Klasse verwendet wird, um ihre Breite zu berechnen.
HTML
<div class="bar" style="--value: 50">50</div>
<div class="bar" style="--value: 100">100</div>
<div class="bar" style="--value: 500">500</div>
<div class="bar" style="--value: 10000">10,000</div>
<div class="bar" style="--value: 2000000">2,000,000</div>
CSS
.bar {
width: calc(log(var(--value), 10) * 2em);
}
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Values and Units Module Level 4 # exponent-funcs |
Browser-Kompatibilität
Loading…