定义变量 - -
:root {
--theme-color: gray;
}
.button {
background-color: var(--theme-color);
}
定义在父元素内,本元素和所有子节点都可以使用这个变量
.container {
position: relative;
--clickX: 0;
--clickY: 0;
}
.container::after {
position: absolute;
transform: translate(var(--clickX, 0), var(--clickY, 0));
}
改变自定义属性的值 el.style.setProperty(attr,value)
const container = document.querySelector('.container');
container.addEventListener('click', evt => {
container.style.setProperty('--clickX', `${evt.clientX}px`);
container.style.setProperty('--clickY', `${evt.clientY}px`);
});
计算 calc
:root {
--image-grid-spacing: 16px;
}
.image-grid {
padding: calc(var(--image-grid-spacing) / 2);
width: calc(100% - 16px);
}