換膚功能實現過程

css3的自定義屬性

	:root{
		--primary-color:#009688;
		--light:#fff;
		--dark:#000;
	}

自定義屬性：–primary-color、–light、–dark
自定義屬性的命名規則：
–variables-name:variables-value
–屬性名：屬性值
設定作用域：
:root 作用於全域性
:root{–theme-color:red;}
#app{–theme-color:red;}//作用於id為app的節點內
使用自定義屬性：

	//全域性定義該屬性
	:root{ --theme-color:red;}
	//使用該屬性
	#app{
		background-color:var(--theme-color);
	}
	//假如沒有指定--theme-color這個屬性，可以在使用的時候加上替代值
	#app{
	//當沒有指定--theme-color屬性值，則會為background-color設定black值
		background-color:var(--theme-color,black);
	}

如何通過js獲取和設定自定義屬性

獲取自定義屬性值

	//在js中獲取--theme-color的值
	var styles = getComputedStyle(document.documentElement)
	var value = styles.getPropertyValue("--theme-color");

更改自定義屬性值

	document.dcumentElement.style.setProperty("--theme-color","black")

js使用getComputedStyle()方法獲取指定元素的css樣式