如何通过CSS变量修改样式的方法

矫情吗；* 2024-03-23 23:40 98阅读 0赞

![7a6f55573c2842477e4fa0e311c60970.jpeg][]

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

**问题**

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

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

示例：改变div的hover背景色

<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 </td> 
 <td> <code>&lt;!-- css --&gt;</code> <code>&lt;</code><code>style</code> <code>type</code><code>=</code><code>"text/css"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>:root { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>--divHoverColor: red;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>div { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width: 100px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height: 100px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background: bisque;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>div:hover { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background: var(--divHoverColor);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&lt;/</code><code>style</code><code>&gt;</code> <code>&lt;!-- html --&gt;</code> <code>&lt;</code><code>div</code> <code>onClick</code><code>=</code><code>"onDivClick('green')"</code><code>/&gt;</code> <code>&lt;!-- js --&gt;</code> <code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function onDivClick(value){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.documentElement.style.setProperty('--divHoverColor', value);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&lt;/</code><code>script</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

那么，来认识下css variable吧

**1. 基本用法**

局部变量

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>div { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>--masterColor: </code><code>red</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background</code><code>: var(--masterColor);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

全局变量

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>/* 对于HTML来说，:root 表示 &lt;html&gt; 元素 */</code> <code>:root { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>--masterColor: </code><code>red</code><code>;</code> <code>}</code> <code>div { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background</code><code>: var(--masterColor);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**2. 语法**

var( <custom-property-name> \[, <declaration-value> \]? )

<custom-property-name> : 自定义属性名

<declaration-value> : 声明值（fallback value）

示例：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>div { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>/*</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>--masterColor未定义，所以背景色使用red </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>它可以通过逗号分隔，定义多个声明值，var(--masterColor, red, green)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>*/</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background</code><code>: var(--masterColor, </code><code>red</code><code>);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

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

示例：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>div { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>--masterColor: </code><code>red</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>--bgColor: var(--masterColor)</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

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

错误示例：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>div { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>--bg: background;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var(--bg): </code><code>red</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**3. 浏览器支持**

使用@support检测

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

使用JS检测

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>const isSupported = window.CSS &amp;&amp; window.CSS.supports </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&amp;&amp; window.CSS.supports(</code><code>'--masterColor'</code><code>, </code><code>'red'</code><code>);</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>

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

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

[7a6f55573c2842477e4fa0e311c60970.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/a323839b395e42d5857108666b231cad.png
[Link 1]: https://www.weidianyuedu.com