关于css变量入门学习

àì夳堔傛蜴生んèń 2024-03-23 23:40 33阅读 0赞

![d701a6e3b5e23a2b24bd402a3dae86a8.jpeg][]

css全局变量定义方法很简单,其实就是在根元素上先定义声明,下面这篇文章主要给大家介绍了关于如何通过一篇文章带你学会css变量的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

CSS 变量 这个是 CSS 新功能，2017年3月，微软宣布 Edge 浏览器将支持 CSS 变量,所有主要浏览器已经都支持了。

### css 变量语法 ###

#### 变量的声明 ####

**声明变量的时候，变量名前面要加两根连词线（`--`）**

例如上面我们申明了2个变量：`--foo`和`--bar`，其实你只需要把它们理解成css自定义属性看待，它们与`color`、`font-size`等正式属性没有什么不同，只是没有默认含义，注意css变量名称是区分大小写的，通常我们写的css是不区分。

你可能会问，为什么选择两根连词线（`--`）表示变量？因为`$foo`被 Sass 用掉了，`@foo`被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线了。

各种值都可以放入 CSS 变量。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>// css文件中的样子</code> <code>:root{ </code> <code>&nbsp;&nbsp;</code><code>--main-</code><code>color</code><code>: </code><code>#4d4e53</code><code>;</code> <code>&nbsp;&nbsp;</code><code>--main-bg: </code><code>rgb</code><code>(</code><code>255</code><code>, </code><code>255</code><code>, </code><code>255</code><code>);</code> <code>&nbsp;&nbsp;</code><code>--logo-</code><code>border-color</code><code>: rebeccapurple;</code> <code>&nbsp;&nbsp;</code><code>--header-</code><code>height</code><code>: </code><code>68px</code><code>;</code> <code>&nbsp;&nbsp;</code><code>--content-</code><code>padding</code><code>: </code><code>10px</code> <code>20px</code><code>;</code> <code>&nbsp;&nbsp;</code><code>--base-</code><code>line-height</code><code>: </code><code>1.428571429</code><code>;</code> <code>&nbsp;&nbsp;</code><code>--transition-duration: .</code><code>35</code><code>s;</code> <code>&nbsp;&nbsp;</code><code>--external-link: </code><code>"external link"</code><code>;</code> <code>&nbsp;&nbsp;</code><code>--</code><code>margin-top</code><code>: calc(</code><code>2</code><code>vh + </code><code>20px</code><code>);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>// html文件中的样子</code> <code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"ggg"</code> <code>style</code><code>=</code><code>"--my-var:black; color: var(--my-var); "</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>p</code><code>&gt;一段文字&lt;/</code><code>p</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>p</code><code>&gt;一段文字&lt;/</code><code>p</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>p</code><code>&gt;一段文字&lt;/</code><code>p</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>p</code><code>&gt;一段文字&lt;/</code><code>p</code><code>&gt;</code> <code>&lt;/</code><code>div</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

> 再次提醒：可以把css变量理解成css自定义属性看待，它们与`color`、`font-size`等正式属性没有什么不同，只是没有默认含义

**变量名大小写敏感**，`--header-color`和`--Header-Color`是**两个不同变量**。

**命名规范**

关于命名这个东西，各种语言都有些显示，例如CSS选择器不能是数字开头，JS中的变量是不能直接数值的，但是，在CSS变量中，这些限制通通没有，如：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>:root { </code> <code>&nbsp;&nbsp;</code><code>-</code><code>-1:</code> <code>#369</code><code>;</code> <code>}</code> <code>body { </code> <code>&nbsp;&nbsp;</code><code>background-color</code><code>: var(-</code><code>-1</code><code>);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

不能包含`$`，`[`，`^`，`(`，`%`等字符，普通字符局限在只要是“数字\[0-9\]”“字母\[a-zA-Z\]”“下划线\_”和“短横线-”这些组合，但是可以是中文，日文或者韩文，例如：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>body { </code> <code>&nbsp;&nbsp;</code><code>--深蓝: </code><code>#369</code><code>;</code> <code>&nbsp;&nbsp;</code><code>background-color</code><code>: var(--深蓝);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**全局变量**`:root`伪类可以看做是一个全局作用域，在里面声明的变量，页面下面的所有选择器都可以拿到变量

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>:root { </code> <code>&nbsp;&nbsp;</code><code>--</code><code>color</code><code>: </code><code>blue</code><code>;</code> <code>}</code> <code>.box{ </code> <code>&nbsp;&nbsp;</code><code>color</code><code>: var(--color);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**局部变量**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>.pather{ </code> <code>&nbsp;&nbsp;</code><code>--</code><code>color</code><code>:</code><code>red</code> <code>}</code> <code>.child{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color</code><code>:var(--color)</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**变量作用域**同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与 CSS 的"层叠"（cascade）规则是一致的

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <code>&lt;style&gt;</code> <code>&nbsp;&nbsp;</code><code>:root { --</code><code>color</code><code>: </code><code>blue</code><code>; }</code> <code>&nbsp;&nbsp;</code><code>div { --</code><code>color</code><code>: </code><code>green</code><code>; }</code> <code>&nbsp;&nbsp;</code><code>#alert { --</code><code>color</code><code>: </code><code>red</code><code>; }</code> <code>&nbsp;&nbsp;</code><code>* { </code><code>color</code><code>: var(--color); }</code> <code>&lt;/style&gt;</code> <code>&lt;p&gt;蓝色&lt;/p&gt;</code> <code>&lt;div&gt;绿色&lt;/div&gt;</code> <code>&lt;div id=</code><code>"alert"</code><code>&gt;红色&lt;/div&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

这就是说，变量的作用域就是它所在的选择器的有效范围。

#### 变量的获取 ####

`var()`函数用于读取变量。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </td> 
 <td> <code>body { </code> <code>&nbsp;&nbsp;</code><code>--bgc: </code><code>#000</code><code>;</code> <code>&nbsp;&nbsp;</code><code>--</code><code>color</code><code>: </code><code>#f00</code><code>;</code> <code>}</code> <code>.pather{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width</code><code>: </code><code>200px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>text-align</code><code>: </code><code>center</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color</code><code>:&nbsp; var(--bgc);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color</code><code>:&nbsp; var(--color);</code> <code>}</code> <code>&lt;div class=</code><code>"pather"</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>css变量</code> <code>&nbsp;&nbsp;</code><code>&lt;div class=</code><code>"child"</code><code>&gt;var()函数&lt;/div&gt;</code> <code>&lt;/div&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**变量设置默认值**`var()`函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>color</code><code>: var(–color,</code><code>#ccc</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

第二个参数不处理内部的逗号或空格，都视作参数的一部分。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>var</code><code>(--font-stack, </code><code>"Roboto"</code><code>, </code><code>"Helvetica"</code><code>);</code> <code>var</code><code>(--pad, 10px 15px 20px);</code> </td> 
 </tr> 
 </tbody> 
</table>

**变量引用**`var()`函数还可以用在变量的声明。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>:root { </code> <code>&nbsp;&nbsp;</code><code>--primary-</code><code>color</code><code>: </code><code>red</code><code>;</code> <code>&nbsp;&nbsp;</code><code>--logo-text: var(--primary-color);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

> 注意，变量值只能用作属性值，不能用作属性名

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>.foo { </code> <code>&nbsp;&nbsp;</code><code>--side: margin-</code><code>top</code><code>;</code> <code>&nbsp;&nbsp;</code><code>/* 无效 */</code> <code>&nbsp;&nbsp;</code><code>var(--side): </code><code>20px</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

上面代码中，变量`–side`用作属性名，这是无效的

#### 变量值的类型 ####

如果变量值是一个字符串，可以与其他字符串拼接。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>--bar: </code><code>'hello'</code><code>;</code> <code>--foo: var(--bar)</code><code>' world'</code><code>;</code> </td> 
 </tr> 
 </tbody> 
</table>

如果变量值是数值，不能与数值单位直接连用。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>.child { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>--</code><code>size</code><code>: </code><code>20</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>/*无效*/</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>font-size</code><code>: var(--size)px;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

数值与单位直接写在一起，这是无效的。必须使用calc()函数，将它们连接。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>.child { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>--</code><code>size</code><code>: </code><code>20</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>font-size</code><code>: calc(var(--size)*</code><code>1px</code><code>);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### 响应式布局 ###

CSS 是动态的，页面的任何变化，都会导致采用的规则变化。

利用这个特点，可以在响应式布局的`media`命令里面声明变量，使得不同的屏幕宽度有不同的变量值。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </td> 
 <td> <code>body { </code> <code>&nbsp;&nbsp;</code><code>--primary: </code><code>#7F583F</code><code>;</code> <code>&nbsp;&nbsp;</code><code>--secondary: </code><code>#F7EFD2</code><code>;</code> <code>}</code> <code>a { </code> <code>&nbsp;&nbsp;</code><code>color</code><code>: var(--primary);</code> <code>&nbsp;&nbsp;</code><code>text-decoration-</code><code>color</code><code>: var(--secondary);</code> <code>}</code> <code>@media </code><code>screen</code> <code>and (</code><code>min-width</code><code>: </code><code>768px</code><code>) { </code> <code>&nbsp;&nbsp;</code><code>body { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>--primary:&nbsp; </code><code>#F7EFD2</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>--secondary: </code><code>#7F583F</code><code>;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### 兼容性处理 ###

对于不支持 CSS 变量的浏览器，可以采用下面的写法。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>a { </code> <code>&nbsp;&nbsp;</code><code>color</code><code>: </code><code>#7F583F</code><code>;</code> <code>&nbsp;&nbsp;</code><code>color</code><code>: var(--primary);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

也可以使用`@support`命令进行检测。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>@supports ( (--a: </code><code>0</code><code>)) { </code> <code>&nbsp;&nbsp;</code><code>/* supported */</code> <code>}</code> <code>@supports ( not (--a: </code><code>0</code><code>)) { </code> <code>&nbsp;&nbsp;</code><code>/* not supported */</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### JavaScript 操作 ###

JavaScript 也可以检测浏览器是否支持 CSS 变量。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <code>const isSupported =</code> <code>&nbsp;&nbsp;</code><code>window.CSS &amp;&amp;</code> <code>&nbsp;&nbsp;</code><code>window.CSS.supports &amp;&amp;</code> <code>&nbsp;&nbsp;</code><code>window.CSS.supports(</code><code>'--a'</code><code>, 0);</code> <code>if</code> <code>(isSupported) { </code> <code>&nbsp;&nbsp;</code><code>/* supported */</code> <code>} </code><code>else</code> <code>{ </code> <code>&nbsp;&nbsp;</code><code>/* not supported */</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

JavaScript 操作 CSS 变量的写法如下。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </td> 
 <td> <code>// 设置变量</code> <code>document.body.style.setProperty(</code><code>'--primary'</code><code>, </code><code>'#7F583F'</code><code>); </code><code>//给body节点设置局部变量</code> <code>document.documentElement.style.setProperty(</code><code>'--primary'</code><code>, </code><code>'#7F583F'</code><code>); </code><code>//给html节点设置全局变量，也就是:root{}内的变量</code> <code>document.querySelector(</code><code>'.ggg'</code><code>).style.setProperty(</code><code>"--my-var"</code><code>, </code><code>'pink'</code><code>); </code><code>// 给ggg样式的dom设置一个局部变量</code> <code>// 读取变量</code> <code>document.body.style.getPropertyValue(</code><code>'--primary'</code><code>).trim(); </code><code>//获取body行间样式中的局部变量</code> <code>document.documentElement.style.getPropertyValue(</code><code>'--primary'</code><code>).trim(); </code><code>//获取html根节点行间样式中的变量</code> <code>getComputedStyle(document.documentElement).getPropertyValue(</code><code>'--time'</code><code>); </code><code>// 获取html根节点中的变量，也就是:root{}中的变量，如果是在css表中设置的需要这种方式获取</code> <code>// 注意：getComputedStyle是获取生效的样式，style.getPropertyValue是获取行间样式，有一点的区别，不懂的看后面例子，细细品</code> <code>document.querySelector(</code><code>'.ggg'</code><code>).style.getPropertyValue(</code><code>"--my-var"</code><code>);&nbsp; </code><code>//获取ggg样式节点的行间样式中局部变量</code> <code>getComputedStyle(document.querySelector(</code><code>'.ggg'</code><code>)).getPropertyValue(</code><code>"--my-var"</code><code>); </code><code>//获取ggg样式节点的生效样式中局部变量</code> <code>// 删除变量</code> <code>document.body.style.removeProperty(</code><code>'--primary'</code><code>); </code><code>//局部</code> <code>document.documentElement.style.removeProperty(</code><code>'--primary'</code><code>); </code><code>//全局</code> </td> 
 </tr> 
 </tbody> 
</table>

写了一个例子(没有写删除变量，会读取就会删除了)，大家细细品一下读取变量

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 </td> 
 <td> <code>&lt;!DOCTYPE html&gt;</code> <code>&lt;html lang=</code><code>"en"</code><code>&gt;</code> <code>&lt;head&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;meta charset=</code><code>"UTF-8"</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;meta http-equiv=</code><code>"X-UA-Compatible"</code> <code>content=</code><code>"IE=edge"</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;meta name=</code><code>"viewport"</code> <code>content=</code><code>"width=device-width, initial-scale=1.0"</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;title&gt;Document&lt;/title&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;style&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>:root { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>--my-</code><code>var</code><code>: red;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>--main-color:</code> <code>#4d4e53;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>--main-bg: rgb(211, 36, 36);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>body { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>--my-</code><code>var</code><code>: blue;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>--main-color:</code> <code>#1d39c7;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>--main-bg: rgb(81, 153, 65);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background: </code><code>var</code><code>(--main-bg);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color: </code><code>var</code><code>(--main-color);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.aaa { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background: </code><code>var</code><code>(--main-bg);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color: </code><code>var</code><code>(--main-color);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.ggg { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>--my-</code><code>var</code><code>: green;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>--main-color:</code> <code>#1d39c7;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>--main-bg: rgb(38, 8, 8);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background: </code><code>var</code><code>(--main-bg);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color: </code><code>var</code><code>(--main-color);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>&lt;/style&gt;</code> <code>&lt;/head&gt;</code> <code>&lt;body style=</code><code>"--my-var:black;"</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;div class=</code><code>"aaa"</code> <code>style=</code><code>"color: var(--my-var);"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;p&gt;一段文字&lt;/p&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;p&gt;一段文字&lt;/p&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;p&gt;一段文字&lt;/p&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;p&gt;一段文字&lt;/p&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/div&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;div class=</code><code>"ggg"</code> <code>style=</code><code>"color: var(--my-var);"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;p&gt;一段文字&lt;/p&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;p&gt;一段文字&lt;/p&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;p&gt;一段文字&lt;/p&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;p&gt;一段文字&lt;/p&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/div&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;div class=</code><code>"ggg"</code> <code>style=</code><code>"color: var(--my-var);"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;p&gt;一段文字&lt;/p&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;p&gt;一段文字&lt;/p&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;p&gt;一段文字&lt;/p&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;p&gt;一段文字&lt;/p&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/div&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;div class=</code><code>"ccc"</code> <code>style=</code><code>"color: var(--my-var);"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;p&gt;一段文字&lt;/p&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;p&gt;一段文字&lt;/p&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;p&gt;一段文字&lt;/p&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;p&gt;一段文字&lt;/p&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/div&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;script&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>a = document.body.style.getPropertyValue(</code><code>"--my-var"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// black , 因为body行间样式有--my-var变量</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'a'</code><code>, a);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>b = getComputedStyle(document.body).getPropertyValue(</code><code>"--my-var"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// black , 因为body行间样式有--my-var变量，优先级大于样式表中的，所以打印black，不是blue</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'b'</code><code>, b);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>c = document.documentElement.style.getPropertyValue(</code><code>"color"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 空 , 因为html节点行间样式没有--my-var变量</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'c'</code><code>, c);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>d = getComputedStyle(document.documentElement).getPropertyValue(</code><code>"--my-var"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// red, 获取html根节点的变量，也就是:root{}中的变量</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 注意：getComputedStyle是获取生效的样式，style.getPropertyValue是获取行间样式，有一点的区别</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'d'</code><code>, d);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>e = document.querySelector(</code><code>'.ggg'</code><code>).style.getPropertyValue(</code><code>"--my-var"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 空 , 与c的原因一样，因为ggg节点行间样式没有--my-var变量</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'e'</code><code>, e);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>f = getComputedStyle(document.querySelector(</code><code>'.ggg'</code><code>)).getPropertyValue(</code><code>"--my-var"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// green, 样式表中有--my-var有变量</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'f'</code><code>, f);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 修改一个 Dom 节点上的 CSS 变量</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.querySelector(</code><code>'.ggg'</code><code>).style.setProperty(</code><code>"--my-var"</code><code>, </code><code>'pink'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>g = document.querySelector(</code><code>'.ggg'</code><code>).style.getPropertyValue(</code><code>"--my-var"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// pink, 由于上面通过setProperty设置了--my-var变量，所以现在可以获取到变量</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'g'</code><code>, g);</code> <code>&nbsp;&nbsp;</code><code>&lt;/script&gt;</code> <code>&lt;/body&gt;</code> <code>&lt;/html&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

这意味着，JavaScript 可以将任意值存入样式表。下面是一个监听事件的例子，事件信息被存入 CSS 变量。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>const docStyle = document.documentElement.style;</code> <code>document.addEventListener(</code><code>'mousemove'</code><code>, (e) =&gt; { </code> <code>&nbsp;&nbsp;</code><code>docStyle.setProperty(</code><code>'--mouse-x'</code><code>, e.clientX);</code> <code>&nbsp;&nbsp;</code><code>docStyle.setProperty(</code><code>'--mouse-y'</code><code>, e.clientY);</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

那些对 CSS 无用的信息，也可以放入 CSS 变量。

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>--foo: if(x &gt; </code><code>5</code><code>) this.width = </code><code>10</code><code>;</code> </td> 
 </tr> 
 </tbody> 
</table>

上面代码中，--foo的值在 CSS 里面是无效语句，但是可以被 JavaScript 读取。这意味着，可以把样式设置写在 CSS 变量中，让 JavaScript 读取。

所以，CSS 变量提供了 JavaScript 与 CSS 通信的一种途径。

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][https_www.weidianyuedu.com]

[d701a6e3b5e23a2b24bd402a3dae86a8.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/44741597aef0401a8dad0c200cff490f.png
[Link 1]: https://m.weidianyuedu.com/
[https_www.weidianyuedu.com]: https://www.weidianyuedu.com