如何var(…)使用JavaScript(纯文本或jQuery)获取和设置CSS自定义属性(在样式表中使用过的属性)?
var(…)
这是我失败的尝试:单击按钮会更改常规font-weight属性,但不会更改自定义--mycolor属性:
font-weight
--mycolor
<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>
您可以使用document.body.style.setProperty('--name', value);:
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