CSS中的变量使用——var() 函数用于动态改变颜色

CSS中的变量使用——var() 函数用于动态改变颜色css设置公用颜色–-color，css中的引用方法var(–color)。根据 root.setAttribute('style', '–color: #e74c3c') 可修改–color的参数。IE要加上 css-vars-ponyfill示例<template><div id="div1">var() 函数——动

viceen

14448人浏览 · 2022-04-08 14:56:41

viceen · 2022-04-08 14:56:41 发布

CSS中的变量使用——var() 函数用于动态改变颜色

css设置公用颜色–-color，css中的引用方法var(–color)。
根据 root.setAttribute('style', '–color: #e74c3c') 可修改–color的参数。

IE要加上 css-vars-ponyfill

示例

<template>
	<div id="div1">var() 函数——动态改变css样式</div>
</template>

<style>
:root {
  --main-bg-color: coral;  
}

#div1 {
  background-color: var(--main-bg-color);
  padding: 5px;  
}
</style>

效果

在这里插入图片描述

实例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        :root {
            --color: #7f8c8d;
            --spacing: 20px;
        }
        div.colors{
            height: 100px;
            width: 100px;
            background-color: var(--color);
            padding: var(--spacing);
        }
    </style>
</head>
<body>
<div class="colors">

</div>
<div class="actions">
    <a class="red">div红色</a>
    <a class="blue">div蓝色</a>
</div>
</body>
<script>
    var btnColorRed = document.querySelector('.red');
    var btnColorBlue = document.querySelector('.blue');
    var root = document.querySelector(':root');
    btnColorRed.addEventListener('click', function() {
        root.setAttribute('style', '--color: #e74c3c');
    });

    btnColorBlue.addEventListener('click', function() {
        root.setAttribute('style', '--color: #3498db');
    });
</script>
</html>

注：

setAttribute() 方法添加指定的属性，并为其赋指定的值。

如果这个指定的属性已存在，则仅设置/更改值。

效果-点击切换颜色

在这里插入图片描述

实例2

var()——定义/使用css变量

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
 	/* 在这里定义变量 */
   :root{
     --var-primary-color: red;
     --var-cyan-color: blue;
   }

   .box{
     width: 20px;
     height: 20px;
     /* 通过 var(变量名) 引入变量即红色 */
     background: var(--var-primary-color);
   }
 </style>
</head>
<body>
 <div class="box"></div>
 <button onclick="onChange()">改变颜色</button>
 <script type="text/javascript">
 	// 改变颜色
   function onChange() {
     // 通过 setProperty 函数将其 --var-primary-color 变量更改为绿色
     document.documentElement.style.setProperty('--var-primary-color', 'orange')
     // 你也可以用 var(--var-cyan-color) 的方式传递进去，它会自动转成对应的 blue
     // document.documentElement.style.setProperty('--var-primary-color', 'var(--var-cyan-color)')
   }
 </script>
</body>
</html>