Bagaimanakah Saya Boleh Mengakses Pembolehubah CSS Menggunakan JavaScript?

Mengakses Pembolehubah CSS dalam JavaScript

Pembolehubah CSS ialah alat yang berkuasa untuk menyimpan maklumat gaya dalam fail CSS anda. Ia boleh diakses daripada JavaScript, memberikan anda keupayaan untuk mengemas kini penampilan aplikasi web anda secara dinamik.

Untuk mengakses pembolehubah CSS daripada JavaScript, anda boleh menggunakan kaedah getComputedStyle() untuk mendapatkan semula gaya pengiraan sesuatu elemen dan kemudian gunakan kaedah getPropertyValue() untuk mendapatkan nilai harta yang diingini.

Sebagai contoh, jika anda mempunyai pembolehubah CSS berikut pengisytiharan:

:root {
  --color-font-general: #336699;
}

Anda boleh mengakses nilai pembolehubah ini dalam JavaScript menggunakan kod berikut:

getComputedStyle(element).getPropertyValue('--color-font-general');

Ini akan mengembalikan nilai CSS --color-font-general pembolehubah sebagai rentetan. Anda kemudian boleh menggunakan nilai ini untuk melaraskan penampilan aplikasi web anda secara dinamik, seperti dengan menetapkan warna elemen teks.

Berikut ialah contoh cara menggunakan teknik ini untuk menukar warna semua elemen teks. dalam dokumen:

var elements = document.getElementsByTagName('p');
for (var i = 0, element; element = elements[i++];) {
  element.style.color = getComputedStyle(element).getPropertyValue('--color-font-general');
}

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