适用场景:.
1.原生css,scss还是less,都能使用
2.兼容ie9,ie10,ie11
废话不多说,直接上原理(基于css变量实现的)
1.直接使用css变量,实现颜色或者其他属性的改变
2.动态添加新的css变量,层叠掉之前的变量
3.完成
ie兼容处理:
1.遍历所有样式,将里面不兼容的css变量全部替换成对应的颜色或属性
2.删除掉不兼容的样式
3.插入新生成的样式
上代码:
theme.css

html:

less:

js:

效果图:
谷歌:


ie:


本文介绍了一种基于CSS变量的主题切换方法,适用于原生CSS、SCSS或LESS,同时确保了IE9、IE10、IE11的兼容性。通过动态添加CSS变量覆盖原有设置,文章详细阐述了实现过程及IE兼容处理策略。
适用场景:.
1.原生css,scss还是less,都能使用
2.兼容ie9,ie10,ie11
废话不多说,直接上原理(基于css变量实现的)
1.直接使用css变量,实现颜色或者其他属性的改变
2.动态添加新的css变量,层叠掉之前的变量
3.完成
ie兼容处理:
1.遍历所有样式,将里面不兼容的css变量全部替换成对应的颜色或属性
2.删除掉不兼容的样式
3.插入新生成的样式
上代码:
theme.css

html:

less:

js:

效果图:
谷歌:


ie:


3314
2675

被折叠的 条评论
为什么被折叠?