js修改html中的变量,使用JS操作CSS变量（var）动态改变元素颜色

CSS

语言：

CSSSCSS

确定

:root {

--color: #7f8c8d;

--spacing: 20px;

}

html,

body {

height: 100%;

font-family: 'Open Sans';

}

body {

padding: 0 $spacing;

}

.title {

text-align: center;

font-size: 36px;

color: var(--color);

transition: color 0.8s;

font-weight: normal;

}

.box-wrapper {

display: flex;

align-items: center;

justify-content: center;

}

.box {

margin: var(--spacing);

background: var(--color);

transition: background 0.8s;

}

.box-1 {

width: 100px;

height: 100px;

}

.box-2 {

width: 100px;

height: 200px;

}

.actions {

display: flex;

align-items: center;

justify-content: center;

}

.btn {

width: 170px;

margin: var(--spacing);

padding: var(--spacing);

font-size: 14px;

font-weight: bold;

text-transform: uppercase;

text-align: center;

color: #fff;

cursor: pointer;

transition: background 0.4s, color 0.4s;

}

.btn.red {

background: #e74c3c;

border: 3px solid #c0392b;

}

.btn.red:hover {

background: #c0392b;

}

.btn.blue {

background: #3498db;

border: 3px solid #2980b9;

}

.btn.blue:hover {

background: #2980b9;

}

.btn.yellow {

background: #f1c40f;

border: 3px solid #f39c12;

}

.btn.yellow:hover {

background: #f39c12;

}