Bagaimanakah Saya Boleh Mendapatkan Gaya CSS Dengan Cekap Menggunakan JavaScript?

Mendapatkan semula Gaya CSS dengan JavaScript

Memanipulasi gaya melalui JavaScript ialah tugas biasa dalam pembangunan web. Walaupun menetapkan gaya adalah mudah menggunakan sifat gaya, mendapatkan nilai semasa gaya tertentu boleh menjadi lebih mencabar.

Pada masa lalu, mengakses nilai gaya tertentu memerlukan menghuraikan keseluruhan rentetan gaya, proses yang menyusahkan. Walau bagaimanapun, penyemak imbas moden menawarkan penyelesaian yang mudah: getComputedStyle().

Menggunakan getComputedStyle()

Kaedah getComputedStyle() mengembalikan objek yang mewakili gaya pengiraan elemen. Untuk mendapatkan semula nilai gaya tertentu, hanya gunakan kaedah getPropertyValue() pada objek gaya yang dikira.

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

Kod ini mendapatkan semula nilai pengiraan sifat gaya teratas untuk elemen dengan imej ID_1. Hasilnya disimpan dalam pembolehubah teratas. Kaedah window.getComputedStyle() memastikan gaya yang dikira dikembalikan, mengambil kira sebarang peraturan CSS yang digunakan dan gaya sebaris.

Contoh Penggunaan

Pertimbangkan kod HTML berikut:

<img>

Menggunakan getComputedStyle() untuk mendapatkan semula kedudukan teratas semasa imej:

var image = document.getElementById('image_1');
var topPosition = window.getComputedStyle(image).getPropertyValue('top');

Pembolehubah TopPosition kini mengandungi kedudukan teratas yang dikira bagi imej, tanpa mengira mana-mana CSS yang digunakan atau gaya sebaris.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mendapatkan Gaya CSS Dengan Cekap Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!