Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Mengakses dan Mengubahsuai Sifat Tersuai CSS dengan JavaScript?

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

Patricia Arquette
Patricia Arquetteasal
2024-12-13 04:38:01948semak imbas

How Can I Access and Modify CSS Custom Properties with 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn