Wie kann ich mit JavaScript effizient bestimmte CSS-Werte abrufen?

CSS-Werte mit JavaScript abrufen

Während das Festlegen von CSS-Werten mit JavaScript mithilfe des Style-Attributs unkompliziert ist, kann das Abrufen aktueller CSS-Werte eine größere Herausforderung darstellen . In diesem Artikel geht es um die Frage, wie man einen bestimmten CSS-Wert abrufen kann, ohne den gesamten Style-String zu analysieren.

Lösung: getComputedStyle()

Die Lösung für dieses Problem liegt in die getComputedStyle()-Methode. Mit dieser Methode können Sie auf den berechneten Stil eines Elements zugreifen, der alle CSS-Werte umfasst, die auf das Element angewendet wurden, einschließlich Inline- und geerbter Stile.

Um getComputedStyle() zu verwenden, übergeben Sie ihm das Element Sie möchten den Stil abrufen. Es gibt ein Objekt zurück, das alle berechneten Stileigenschaften für dieses Element enthält. Anschließend können Sie die getPropertyValue()-Methode dieses Objekts verwenden, um den Wert einer bestimmten CSS-Eigenschaft abzurufen.

Hier ist ein Beispiel, um zu veranschaulichen, wie der oberste CSS-Wert eines Bildelements mit der ID image_1 abgerufen wird:

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

console.log(top);

Dieser Code protokolliert den aktuellen Spitzenwert des Bildelements in der Konsole. Beachten Sie, dass der oberste Wert eine Zeichenfolge ist. Wenn Sie also Berechnungen damit durchführen müssen, müssen Sie ihn zuerst in eine Zahl umwandeln.

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