换肤功能,css文件中准备三套颜色

1.知识点

1.document.documentElement
// 获取html的方法(document.documentElement)
// document.documentElement是专门获取html这个标签的
document.documentElement.setAttribute('data-skin', key)

效果图:key=‘white’时
换肤功能,css文件中准备三套颜色_第1张图片

2. :root 选择器

定义和用法:
:root 选择器匹配文档根元素。
在 HTML 中,根元素始终是 html 元素。

换肤功能,css文件中准备三套颜色_第2张图片

3.存储localStorage

存储通过setItem键值方式,值存入是String类型的数据。 例如:localStorage.setItem("key","value"); 
当然也可以存储对象,需要用JSON.stringify(obj);转换一下
获取通过getItem("key") 方式,如果存入的是对象就用JSON.parse("")转换成你想要的对象。

 /**
   * @name: 存储localStorage
   * @param {type}  name是属性名称;content是属性值
   * @return: 
   */
  setStore (name, content) {
    if (!name) return
    if (typeof content !== 'string') {
      content = JSON.stringify(content)
    }
    window.localStorage.setItem(name, content)
  }

2.使用

1.分析功能点

a.点击按钮,切换一套css(这个功能很简单)
b.把皮肤设置保存到全局变量,在访问其它页面时也能有效果
c.把设置保存到本地,退出应用再进来时,依然加载上次设置的皮肤

你可能感兴趣的