css 变量与javascript结合

Posted 2020-08-23 jayruan

<div onClick="test(‘yellow‘)">
CSS Variable
</div>

================CSS

:root{
--mainColor:red;
}

div{
background:black;
color:var(--mainColor);
}

div{
text-align:center;
}

:root {
--mainWidth:1000px;
--leftMargin:100px;
}

.main {
width: var(--mainWidth);
margin-left: var(--leftMargin);
}

@media screen and (min-width:1480px) {
:root {
--mainWidth:800px;
--leftMargin:50px;
}
}

================javascript

// 读取
var root = getComputedStyle(document.documentElement);
var cssVariable = root.getPropertyValue(‘--mainColor‘).trim();

console.log(cssVariable); // ‘75px‘

// 写入

function test(m){
document.documentElement.style.setProperty(‘--mainColor‘, m);
}