JS 动态修改CSS 样式方法全局

html-css05

JS 动态修改CSS 样式方法全局,第1张

如何配置自行百度

1.scss文件定义变量

2.js中更改$textColor 变量的值

都是获取DOM

通过DOM分别修改当前DOM样式属性值、

当前DOM整体css样式、

修改当前DOM的className类名、

将link引入的标签作为DOM 修改link的href,从而修改引用的样式表。

详情转自: https://blog.csdn.net/wx13227855087/article/details/81391787

前端中有用到需要设置主题颜色,根据用户喜欢实现换肤的可以使用css中:root定义变量的方式,或者使用动态切换引入的外部css样式表实现,这里着重记录下动态修改css中:root定义的变量实现换肤:

这里定义变量必须是以'--'开头,然后其他页面的样式表就可以直接引用这个变量了

至此就完成了动态修改:root变量实现换肤了,具体的应用场景中我们应该是在页面上操作,选中需要的肤色然后修改:root定义的变量值,考虑到浏览器刷新会重置原始状态的值,这里要结合本地存储方式记住选中的肤色,具体的实现参考: