总结
在切换主题时，修改html的theme属性值，那么由于style里面设置的属性选择器，变量值会根据html的theme进行设置。理解成每种主题都是一个模块，利用theme设置了命名空间一样。
document.documentElement.setAttribute('theme', 'dark')
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8">
<title>demo 窍门天下 阿牛制作</title>
</head>
<body><style type="text/css">
.demo{ font-size:18px font-weight:bold color:#F00}
.test{ font-size:18px font-weight:bold color:#3F0}
</style>
<div class="test" id="test">
<form action="" method="post">
<input type="checkbox" name="" id="" value="">测试
<input type="submit" name="add" id="btn" value="确定">
</form>
</div>
<script>
window.onload = function(){
var btn = document.getElementById('btn')
btn.onclick = function(){
document.getElementById('test').setAttribute('class', 'demo')
return false
}
}
</script>
</body>
</html>
