Bagaimanakah Saya Boleh Mengakses dan Mengubahsuai Sifat Tersuai CSS dengan JavaScript?

Mengakses Sifat Tersuai CSS dengan JavaScript

Sifat CSS tersuai atau pembolehubah CSS, menyediakan cara untuk mentakrif dan menggunakan semula nilai gaya sepanjang helaian gaya . Untuk memanipulasi sifat ini menggunakan JavaScript, terdapat beberapa kaedah yang tersedia.

Satu pendekatan adalah melalui kaedah 'document.body.style.setProperty()':

var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--foo-bar'); //get

document.body.style.setProperty('--foo-bar', newValue); //set

Sebagai contoh, dalam coretan kod yang disediakan di mana sifat 'warna latar belakang' ditetapkan menggunakan sifat tersuai '--(mycolor)', ia akan diubah suai sebagai berikut:

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

Kaedah ini menetapkan secara langsung nilai sifat tersuai CSS dan perubahan akan ditunjukkan dalam gaya elemen yang dikira.

Sebagai alternatif, anda boleh menggunakan jQuery untuk bekerja dengan CSS sifat tersuai:

$('body').css('--foo-bar', newValue); //set

Kaedah ini menggunakan fungsi 'css()' jQuery untuk menetapkan atau mendapatkan semula nilai sesuatu Sifat CSS, termasuk pembolehubah CSS:

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

Dengan menggunakan kaedah ini, anda boleh mengawal sifat tersuai CSS secara dinamik dan mengubah suai penampilan visual halaman web dan aplikasi anda.

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