Bagaimanakah Saya Boleh Mengakses dan Mengubah Suai Sifat Tersuai CSS (Pembolehubah) dengan JavaScript?

Mengakses Sifat Tersuai CSS (Pembolehubah) melalui JavaScript

JavaScript menyediakan cara untuk berinteraksi dengan sifat tersuai CSS, yang dikenali sebagai pembolehubah CSS. Walaupun ditakrifkan sebagai var() dalam helaian gaya, mengaksesnya melalui JavaScript memerlukan pendekatan yang sedikit berbeza.

Mendapatkan dan Menetapkan Sifat Tersuai

Untuk mendapatkan nilai tersuai harta, gunakan sintaks berikut:

var value = document.body.style.getPropertyValue('--property-name');

Begitu juga, untuk menetapkan sifat tersuai, gunakan:

document.body.style.setProperty('--property-name', 'new-value');

Contoh Pelaksanaan

Pertimbangkan sifat tersuai --mycolor yang ditakrifkan dalam CSS sebagai warna latar belakang elemen. Untuk menukar warnanya menggunakan JavaScript, anda boleh melaksanakan kod berikut:

document.body.style.setProperty('--mycolor', 'red');

Kaedah Alternatif

jQuery juga menawarkan kaedah untuk berinteraksi dengan sifat tersuai:

// Get property
var value = $('body').css('--property-name');

// Set property
$('body').css('--property-name', 'new-value');

Mengelakkan Perkara Biasa Perangkap

Seperti yang ditunjukkan dalam contoh awal, mengakses sifat tersuai menggunakan sintaks [style.property] standard (cth., document.body.style['--mycolor']) tidak akan berfungsi. Sebaliknya, gunakan kaedah getPropertyValue dan setProperty dengan tanda sempang berganda sebelum nama sifat.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengakses dan Mengubah Suai Sifat Tersuai CSS (Pembolehubah) dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!