CSS Var Fallback

by joshuatz

HTML

<div class="varPadding">
</div>

<button onClick="changePadding()">
Toggle Padding
</button>

CSS

.varPadding {
	background-color: red;
	width: 300px;
	height: 300px;
	padding: var(--zeroPadding, 50px);
}

JavaScript

document.querySelector(':root').style.setProperty('--zeroPadding','0px');
var isSet = true;
function changePadding() {
	console.log(document.querySelector(':root').style.getPropertyValue('--zeroPadding'))
	if (isSet) {
		document.querySelector(':root').style.removeProperty('--zeroPadding');
		isSet = false;
	}
	else {
		document.querySelector(':root').style.setProperty('--zeroPadding','0px');
		isSet = true;
	}
}