JavaScript? ???? CSS ??? ?? ??? ???
JavaScript? CSS ????? ?? CSS ??? ?? ??? ????? ???? ??? ?????. ?? CSS ??? ?? ??? ??? ?? ??? ?????? var(...) ??? ?? ???? ? ????.
??? ?? ?? ? ????
??? ?? ??? ?? window.getCompulatedStyle(document.body).getPropertyValue('--name')? ?????. ??? --name? ??? ?? ?? ?????. ?:
var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--foo-bar');
??? ?? ?? ? ??
??? ?? ?? ?? ????? document.body.style.setProperty('--name', value), ??? --name? ??? ?? ?? ???? value? ? ????. ?:
document.body.style.setProperty('--foo-bar', 'red');
?
?? ??? ?????.
<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>
"Plain JS" ?? "jQuery" ?? ?? ?? --mycolor ??? ?? ??? ????? ???? ???? ?? ?????.
? ??? JavaScript? CSS ??? ?? ??? ??? ????? ??? ? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!