换肤的新策略(兼容ie9,10,11)

适用场景:.
1.原生css,scss还是less,都能使用

2.兼容ie9,ie10,ie11

废话不多说,直接上原理(基于css变量实现的)

1.直接使用css变量,实现颜色或者其他属性的改变

2.动态添加新的css变量,层叠掉之前的变量

3.完成

ie兼容处理:

1.遍历所有样式,将里面不兼容的css变量全部替换成对应的颜色或属性

2.删除掉不兼容的样式

3.插入新生成的样式

 

上代码:

theme.css

换肤的新策略(兼容ie9,10,11)

html:

换肤的新策略(兼容ie9,10,11)

less:

换肤的新策略(兼容ie9,10,11)

js:

换肤的新策略(兼容ie9,10,11)

 

效果图:

谷歌:

换肤的新策略(兼容ie9,10,11)

换肤的新策略(兼容ie9,10,11)

ie:

换肤的新策略(兼容ie9,10,11)

换肤的新策略(兼容ie9,10,11)