Bagaimanakah Saya Boleh Mendapatkan Nilai CSS Tertentu Dengan Cekap Menggunakan JavaScript?

Mengambil Nilai CSS dengan JavaScript

Walaupun menetapkan nilai CSS dengan JavaScript adalah mudah menggunakan atribut gaya, mendapatkan nilai CSS semasa boleh menjadi lebih mencabar . Artikel ini menangani persoalan bagaimana untuk mendapatkan nilai CSS tertentu tanpa menghuraikan keseluruhan rentetan gaya.

Penyelesaian: getComputedStyle()

Penyelesaian kepada masalah ini terletak pada kaedah getComputedStyle(). Kaedah ini membolehkan anda mengakses gaya pengiraan elemen, yang merangkumi semua nilai CSS yang telah digunakan pada elemen, termasuk kedua-dua gaya sebaris dan diwarisi.

Untuk menggunakan getComputedStyle(), anda menghantar elemen tersebut. anda ingin mendapatkan semula gaya untuk. Ia mengembalikan objek yang mengandungi semua sifat gaya yang dikira untuk elemen itu. Anda kemudiannya boleh menggunakan kaedah getPropertyValue() objek ini untuk mendapatkan semula nilai sifat CSS tertentu.

Berikut ialah contoh untuk menggambarkan cara mendapatkan semula nilai CSS teratas elemen imej dengan ID image_1:

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

console.log(top);

Kod ini akan log nilai teratas semasa elemen imej ke konsol. Ambil perhatian bahawa nilai teratas ialah rentetan, jadi jika anda perlu melakukan sebarang pengiraan padanya, anda perlu menukarnya kepada nombor dahulu.

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