高端网站建设seo,网络营销渠道的类型有哪些,新能源汽车前十名品牌,wordpress 导出评论目录 背景
#xff08;强烈推荐#xff09;实现方法1#xff1a;CSS中原生变量“--”和var()
步骤1#xff1a;定义css变量 步骤2#xff1a;使用CSS变量
步骤3#xff1a;切换主题
实现完整案例
实现方法2#xff1a;link 动态引入 背景 我们需要做一个功能#…目录 背景
强烈推荐实现方法1CSS中原生变量“--”和var()
步骤1定义css变量 步骤2使用CSS变量
步骤3切换主题
实现完整案例
实现方法2link 动态引入 背景 我们需要做一个功能类似动态换肤这种功能。实现方式无非两种一种是css变量、另一种是link动态引入 强烈推荐实现方法1CSS中原生变量“--”和var()
步骤1定义css变量
属性名
属性名必须使用 --开头在:root中定义root后面的参数用来区分是哪个主题样式 :root[theme主题名称]可以是数字、字母、下划线、中划线
属性值
css普通属性可以用的比如数字、文本、带单位的长度、角度等等都可以作为属性值
注意点
大小写敏感大写 和 小写 不同 的2个属性名将会是2个属性计算时有效性自定义属性值可以是任何内容甚至可能不是css的有效数值但这并不影响定义只要保证在使用css自定义属性的地方最终的计算结果是有效的就可以了。
案例 /* 默认主题 */:root {--color: yellow}/* 蓝色主题 */:root[themeblue] {--color: blue}/* 红色主题 */:root[themered] {--color: red} 步骤2使用CSS变量
css提供了一个var()方法进行自定义属性值的获取。可以在多个地方获取到自定义的属性值。css也提供了calc()方法进行数值的计算。它里面就可以通过var()使用自定属性的值进行计算。
:root {--size: 100px;
}div1 {width: var(--size);
}div2 {width: calc(var(--size) - 2px);
}步骤3切换主题
思路
切换html标签上的theme属性的值来实现切换对应的主题。
theme属性的值为root后的参数 主题名称:root[theme主题名称]如果无theme或者未匹配上对应的就使用默认的root。
document.documentElement.setAttribute(theme, 要切换的主题名称)
实现完整案例
!DOCTYPE html
html langen themeblueheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style/* 默认主题 */:root {--color: yellow}/* 蓝色主题 */:root[themeblue] {--color: blue}/* 红色主题 */:root[themered] {--color: red}h1 {color: var(--color)}
/stylebodyh1点击我切换主题/h1
/body
scriptconst data document.getElementsByTagName(h1)data[0].onclick () {document.documentElement.setAttribute(theme, red)}
/script/html
实现方法2link 动态引入
通过改变link 标签的 href 属性实现动态修改样式暂不推荐这种方案
优点实现了按需加载提高了性能
缺点动态加载样式文件可能会因为网络问题导致样式加载过慢 可维护性较差后续新增或修改主题较为麻烦。
