您现在的位置是：网站首页> 编程资料编程资料

通过CSS变量修改样式的方法示例你真的需要了解一下CSS变量 var()的用法css文件中的样式类被覆盖，js文件中的变量未定义问题CSS变量对JS交互组件开发带来的提升与变革示例代码详解

2021-09-04 986人已围观

简介这篇文章主要介绍了通过CSS变量修改样式的方法示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

问题

js怎么去修改css伪类样式呢？但是js并没有伪类选择器，那么该怎么办呢？网上有不少方法，比如通过切换元素的类、在style中动态插入新的样式等。

那么这里再来一种方法，设置css变量（var），通过js去改变这个变量来实现。

示例：改变div的hover背景色

那么，来认识下css variable吧

1. 基本用法

局部变量

 div { --masterColor: red; background: var(--masterColor); }

全局变量

 /* 对于HTML来说，:root 表示  元素 */ :root { --masterColor: red; } div { background: var(--masterColor); }

2. 语法

var( [, ]? )

: 自定义属性名

: 声明值（fallback value）

示例：

 div { /* --masterColor未定义，所以背景色使用red 它可以通过逗号分隔，定义多个声明值，var(--masterColor, red, green) */ background: var(--masterColor, red); }

变量可以通过var()进行引用

示例：

 div { --masterColor: red; --bgColor: var(--masterColor) }

注意：属性名是不能使用变量的

错误示例：

 div { --bg: background; var(--bg): red; }

3. 浏览器支持

Can I use

使用@support检测

 @supports ( (--masterColor: red)) { /* supported */ } @supports ( not (--masterColor: red)) { /* not supported */ }

使用JS检测

 const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--masterColor', 'red'); if (isSupported) { /* supported */ } else { /* not supported */ }

参考

MDN
CSS Variable 规范

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：css加载会造成阻塞吗浅谈CSS到底会不会阻塞页面渲染详解css加载会造成阻塞吗浅谈css动画是否会被js阻塞

下一篇：使用智能 CSS 基于用户滚动位置应用样式CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

您现在的位置是：网站首页> 编程资料编程资料

通过CSS变量修改样式的方法示例你真的需要了解一下CSS变量 var()的用法css文件中的样式类被覆盖，js文件中的变量未定义问题CSS变量对JS交互组件开发带来的提升与变革示例代码详解

相关内容

点击排行

本栏推荐

猜你喜欢