Bagaimanakah Saya Boleh Mengakses Pembolehubah CSS dalam JavaScript?

Mengakses Pembolehubah CSS dalam JavaScript

Dalam pembangunan web, pembolehubah CSS menyediakan cara yang mudah untuk menyimpan dan menggunakan semula gaya. Walaupun pembolehubah ini boleh ditetapkan dan diubah suai terus dalam CSS, anda mungkin menghadapi keperluan untuk mengakses nilainya dalam JavaScript.

Mengakses pembolehubah CSS daripada JavaScript adalah mudah. Begini caranya:

Langkah 1: Dapatkan Gaya Pengiraan

Untuk mendapatkan gaya pengiraan semasa bagi elemen, gunakan fungsi getComputedStyle. Fungsi ini menerima elemen sebagai hujah dan mengembalikan gaya yang dikira sebagai objek CSSStyleDeclaration.

var style = getComputedStyle(element);

Langkah 2: Dapatkan Nilai Pembolehubah

Sebaik sahaja anda mempunyai gaya yang dikira, anda boleh mengakses nilai mana-mana pembolehubah CSS menggunakan kaedah getPropertyValue objek CSSStyleDeclaration. Kaedah getPropertyValue mengambil nama pembolehubah sebagai hujah.

var variableValue = style.getPropertyValue('variable-name');

Sebagai contoh, untuk mengakses pembolehubah CSS --color-font-general dalam contoh yang anda berikan, anda akan menulis:

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

Pembolehubah fontColor kini akan memegang nilai pembolehubah CSS, yang dalam kes ini ialah #336699.

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