Rumah >hujung hadapan web >tutorial css >Bagaimanakah JavaScript Boleh Mengakses dan Mengubahsuai Sifat Tersuai CSS?
Bagaimanakah JavaScript Boleh Mengakses dan Mengubahsuai Sifat Tersuai CSS?
- Linda Hamiltonasal
- 2024-12-09 03:01:09864semak imbas
Mengakses Sifat Tersuai CSS dengan JavaScript
JavaScript menyediakan kaedah untuk mengakses dan memanipulasi sifat tersuai CSS, juga dikenali sebagai pembolehubah CSS. Tidak seperti sifat CSS biasa, sifat tersuai ini boleh diakses melalui sintaks var(...) dalam lembaran gaya.
Mendapatkan Nilai Harta Tersuai
Untuk mendapatkan semula nilai sifat tersuai, gunakan window.getComputedStyle(document.body).getPropertyValue('--name'), di mana --name ialah tersuai nama harta. Contohnya:
var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--foo-bar');
Menetapkan Nilai Harta Tersuai
Untuk menetapkan nilai harta tersuai, gunakan document.body.style.setProperty('--name', value), dengan --name ialah nama harta tersuai dan nilai ialah nilai baharu. Contohnya:
document.body.style.setProperty('--foo-bar', 'red');
Contoh
Pertimbangkan kod berikut:
<body>
<p>Let's try to make this text bold and the background red.</p>
<button onclick="plain_js()">Plain JS</button>
<button onclick="jQuery_()">jQuery</button>
<script>
function plain_js() {
document.body.style.setProperty('--mycolor', 'red');
document.body.style['font-weight'] = 'bold';
};
function jQuery_() {
$('body').css('--mycolor', 'red');
$('body').css('font-weight', 'bold');
}
</script>
</body>
Mengklik butang "JS Biasa" atau "jQuery" kini akan menetapkan sifat tersuai --mycolor kepada merah dan tebalkan teks.
Atas ialah kandungan terperinci Bagaimanakah JavaScript Boleh Mengakses dan Mengubahsuai Sifat Tersuai CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!