Wie kann ich CSS-Werte mit JavaScript abrufen?

CSS-Werte mit JavaScript abrufen

Zusätzlich zum Festlegen von CSS-Werten mit JavaScript (z. B. document.getElementById('image_1').style .top = '100px') können Sie auch den aktuellen Wert einer bestimmten Stileigenschaft abrufen. Dies kann für verschiedene Zwecke nützlich sein, beispielsweise um das Erscheinungsbild eines Elements basierend auf seinem aktuellen Stil dynamisch anzupassen.

Um den Wert einer bestimmten CSS-Eigenschaft zu erhalten, können Sie die Methode getComputedStyle() verwenden. Diese Methode verwendet ein Element als Argument und gibt ein CSSStyleDeclaration-Objekt zurück, das den berechneten Stil dieses Elements darstellt. Jede Eigenschaft im CSSStyleDeclaration-Objekt entspricht einer CSS-Eigenschaft, und der Wert der Eigenschaft spiegelt den berechneten Wert für diese Stileigenschaft wider.

Hier ist ein Beispiel:

var element = document.getElementById('image_1'),
    style = window.getComputedStyle(element),
    top = style.getPropertyValue('top');
console.log(top);

In diesem Beispiel , wird die Methode getComputedStyle() verwendet, um den berechneten Stil des Elements mit der ID „image_1“ abzurufen. Anschließend wird die Methode getPropertyValue() verwendet, um den Wert der Stileigenschaft „top“ für dieses Element abzurufen. Der Wert der Eigenschaft „top“ (in diesem Beispiel wahrscheinlich „100px“) ist dann über die Variable top verfügbar und kann zur weiteren Verarbeitung oder Manipulation in Ihrem JavaScript-Code verwendet werden.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Werte mit JavaScript abrufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!