利用css和javascript css与javascript

<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);
}