Bagaimana untuk mendapatkan dan menetapkan sifat tersuai CSS (sifat diakses melalui var(…) dalam helaian gaya) menggunakan JavaScript (biasa atau jQuery)?
Ini adalah percubaan saya yang tidak berjaya: mengklik butang mengubah sifat font-weight 属性，但不会更改自定义 --mycolor biasa:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
body {
--mycolor: yellow;
background-color: var(--mycolor);
}
</style>
</head>
<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['font-weight'] = 'bold';
document.body.style['--mycolor'] = 'red';
};
function jQuery_() {
$('body').css('font-weight', 'bold');
$('body').css('--mycolor', 'red');
}
</script>
</body>
</html>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Penyelesaian asli
Cara standard untuk mendapatkan/menetapkan pembolehubah CSS3 ialah
.setProperty()和.getPropertyValue().Jika pembolehubah anda ialah pembolehubah global (diisytiharkan dalam
:root), anda boleh menggunakan yang berikut untuk mendapatkan dan menetapkan nilainya.// setter document.documentElement.style.setProperty('--myVariable', 'blue'); // getter document.documentElement.style.getPropertyValue('--myVariable');Walau bagaimanapun, jika nilai var telah ditetapkan menggunakan
.setProperty(), pengambil hanya akan mengembalikan nilai tersebut. Jika ditetapkan melalui pengisytiharan CSS,undefinedakan dikembalikan. Lihat dalam contoh ini:Untuk mengelakkan tingkah laku yang tidak dijangka ini, anda mesti memanggil kaedah
.getPropertyValue()之前使用getCompulatedStyle(). Pengambil akan kelihatan seperti ini:getComputedStyle(document.documentElement,null).getPropertyValue('--myVariable');Pada pendapat saya, mengakses pembolehubah CSS sepatutnya lebih mudah, lebih pantas, intuitif dan semula jadi...
Pendekatan peribadi saya
Saya melaksanakan
CSSGlobalVariablespembantu javascript kecil ( untuk akses dan manipulasi yang lebih mudah .Sebarang perubahan yang digunakan pada sifat objek ditukar secara automatik kepada pembolehubah CSS.
Tersedia: https://github.com/colxi/ css-global variables
Anda boleh menggunakan
document.body.style.setProperty('--name', value);:var bodyStyles = window.getComputedStyle(document.body); var fooBar = bodyStyles.getPropertyValue('--foo-bar'); //get document.body.style.setProperty('--foo-bar', newValue);//set