css变量的使用

最新推荐文章于 2023-01-28 15:37:40 发布

Z-Juln

最新推荐文章于 2023-01-28 15:37:40 发布

阅读量209

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/ef_ef/article/details/106588583

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

–XXX 即自定义的css变量

css变量有继承性,子元素可以获取父元素的css变量

获取: var(–XXX)

:root 是根目录,而web的根目录是html标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css变量的使用</title>
    <style>
        :root{
            --Colors: red;
        }
        div{
            background-color: var(--Colors);
            --Wid: 100px;
            height: var(--Wid);
            width: var(--Wid);
        }
    </style>
</head>
<body>
    <div></div>
    <button>点我换色</button>
</body>
<script>
	let $ = str => document.querySelector(str)
    $('button').onclick = function() {
        $(':root').style.setProperty('--Colors','black')
    }
</script>
</html>