原文：
http://css-live.ru/articles/dostup-k-css-peremennym-i-ix-izmenenie-spomoshhyu-javascript.html
?:root { ???--footer-color: #2cba92; ???/* @reasonCode зеленый */ ???--palatte-padding-left: 0px ?} ?footer { ???width: 50px; ???height: 50px; ???margin-top: 20px; ???margin-left: var(--palatte-padding-left); ???background-color: var(--footer-color); ???border-radius: 15px; ?} ?const footer = document.querySelector(‘footer‘) ?const inputs = [].slice.call(document.querySelectorAll(‘input‘)); ?inputs.forEach(input => input.addEventListener(‘change‘, handleUpdate)); ?inputs.forEach(input => input.addEventListener(‘mousemove‘, handleUpdate)); ?function handleUpdate(e) { ???if (this.type === ‘color‘) { ?????footer.style.setProperty(‘--footer-color‘, this.value) ???} else { ?????footer.style.setProperty(‘--palatte-padding-left‘, this.value + ‘px‘) ???} ?} ?<body style="padding: 20px"> ???<label>Выберите свой любимый цвет:</label> ???<input type="color" value="#2cba92"> ???<br/> ???<label>Настройте отступ:</label> ???<input type="range" id="margin" min="10" max="200" value="0"> ???<footer></footer> ?</body>js操作css变量
原文地址：https://www.cnblogs.com/daysme/p/8342898.html