美文网首页
利用 css 的 var() 设置全局颜色变量并进行更改(不兼容

利用 css 的 var() 设置全局颜色变量并进行更改(不兼容

作者: 0000000asdasd | 来源:发表于2019-06-22 19:31 被阅读0次

利用 :root 和 css var() 进行全局颜色变亮设置,并且可以使用 js 进行颜色更改
在index.html 中声明 :root{--color-text}


捕获.JPG

页面使用


捕获1.JPG

效果


捕获2.JPG

js更改


捕获4.JPG

效果


捕获3.JPG

相关文章

  • 利用 css 的 var() 设置全局颜色变量并进行更改(不兼容

    利用 :root 和 css var() 进行全局颜色变亮设置,并且可以使用 js 进行颜色更改在index.ht...

  • 简单的JS+CSS实现网页自定义换肤

    1,实现效果 2,实现原理 主要原理是利用css变量设置颜色,用js动态修改变量,使颜色变化,兼容性如下; 3,实...

  • swift 4.0 仿淘宝网格与列表切换效果

    1//设置一个全局Bool类型的变量并赋值 var _isGrid:Bool = true//默认网格 2. 视图...

  • 全局变量&局部变量

    var a; //全局变量 function test(){ var b; //局部变量 c; //全局变量 }

  • 设置css变量 - :root{}、var()

    非IE浏览器及ie9+支持 :root是一个伪类,表示文档根元素。在:root中声明相当于全局属性。

  • ES6 ~Let

    let And var Var 全局变量 变量i是var命令声明的,在全局范围内都有效,所以全局只有一个变量i。每...

  • ES6 学习

    var声明的变量为全局变量let声明的变量为局部变量const声明为局部只读常量,值不能进行修改(声明就要赋值,不...

  • CSS变量

    一、基础变量 css也支持变量哦,把需要更改的地方设置成变量,一处设置,多处改变。 请看栗子:通过--variab...

  • function立即执行函数

    定义全局变量 test 并赋值 var test = 'f'; (function() { console.log...

  • ES6语法

    一、变量的声明 变量声明:全局变量var、块级变量let、常量const。 var:全局变量,会有变量提升 let...

网友评论

      本文标题:利用 css 的 var() 设置全局颜色变量并进行更改(不兼容

      本文链接:https://www.haomeiwen.com/subject/gyxlxctx.html