Bagaimanakah Saya Boleh Mengakses dan Mengubahsuai Sifat Tersuai CSS Dengan Berkesan Menggunakan JavaScript?

Berinteraksi dengan Sifat Tersuai CSS dalam JavaScript

Dalam pembangunan web moden, sifat tersuai CSS, juga dikenali sebagai pembolehubah CSS, memainkan peranan penting dalam meningkatkan penyesuaian gaya dan kebolehselenggaraan kod. Sifat ini boleh ditakrifkan dalam lembaran gaya dan diakses menggunakan sintaks var(...). Walau bagaimanapun, mengakses dan memanipulasinya melalui JavaScript memberikan cabaran yang unik.

Akses dan Manipulasi Harta Tersuai

Untuk mengakses sifat tersuai CSS menggunakan JavaScript, anda boleh memanfaatkan dokumen .body.style.setProperty() kaedah. Kaedah ini menerima dua hujah:

• --nama: Nama sifat tersuai, diawali dengan dua sempang (--).
• nilai: Nilai yang anda ingin tetapkan harta itu.

Sebagai contoh, untuk menukar sifat tersuai '--mycolor' yang ditakrifkan dalam HTML yang disediakan kod:

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

jQuery untuk Manipulasi Harta

Sebagai alternatif, anda boleh menggunakan kaedah css() jQuery untuk mencapai hasil yang sama:

$('body').css('--mycolor', 'red');

Contoh

Dalam HTML yang anda sediakan kod, anda cuba mengubah suai sifat '--mycolor' menggunakan sintaks yang salah. Untuk mencapai kesan yang diingini, pengubahsuaian berikut diperlukan:

function plain_js() { 
  document.body.style['font-weight'] = 'bold';
  document.body.style.setProperty('--mycolor', 'red');
}

function jQuery_() {
  $('body').css('font-weight', 'bold');
  $('body').css('--mycolor', 'red');
}

Dengan menggunakan sintaks yang sesuai, anda kini boleh berjaya menetapkan kedua-dua sifat 'font-weight' dan sifat tersuai '--mycolor', menukar teks dan warna latar belakang elemen sasaran secara dinamik.

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