CSS变量_代码007

本文介绍: CSS变量的基本使用

一、简介

CSS变量也被称为自定义属性，它们允许开发人员在CSS中创建可重用的值，这些值可以在整个样式表中使用。CSS变量使用var()函数来引用它们。

二、定义

语法规则：

定义：–变量名：变量值;

e g: —baseFon t: 12px;

使用：var(–变量名)

e g: .box {
color: var(–baseFon t)
}

css变量可分为局部变量和全局变量。顾名思义全局变量，没有作用域限制。局部变量只能某个代码块内使用。

1、全局变量

全局变量定义时使用 :root { } 包裹，其内部的变量可全局使用。

/* 定义 */
:root {
    --black-theme: #000;
    --white-theme: #fff;
}

/* 使用 */
.container {
    color: var(--black-theme)
}

2、局部变量

局部变量定义在某个选择器内，其生效的范围为当前及其子元素。

:root {
     --bg-yellow: yellow;
     --bg-black: black;
 }

.father {
     width: 300px;
     height: 300px;
     margin: auto;
     display: flex;
     justify-content: center;
     align-items: center;
     /* 这里的--bg-red 是在 .son 选择器中定义的，因此这里不生效 */
     background: var(--bg-red);
}

.son {
    --bg-red: red;
    --bg-orange: orange;
    width: 100px;
    height: 100px;
    background: var(--bg-red);
}

p {
    background: var(--bg-orange);
}

&lt;div class="father"&gt;
     &lt;div class="son">
          <p>子元素</p>
     </div>
 </div>

三、兼容性（CSS Variables）

四、如何通过JS获取和修改变量

1、获取值

document.documentElement.style.getPropertyValue('--bg-red')

2、修改值

document.documentElement.style.setProperty('--bg-red', '#f00');

原文地址:https://blog.csdn.net/weixin _42224591/article/de tail s/130525548

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_44548.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：su w ngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

相关文章

发表回复 取消回复

发表回复取消回复