开发者社区> 前端修罗场> 正文

【CSS自定义属性】引入| 使用var() | cal()计算 | css与js的连接

简介: 【CSS自定义属性】引入| 使用var() | cal()计算 | css与js的连接
+关注继续查看

CSS 自定义属性

CSS 自定义属性 (也被称为 CSS 变量),目前从 Can I use 上获取的信息显示除了 Edge外主流浏览器的最新版都已经支持这个特性了,而 Edge 也将支持这个属性。考虑兼容尚未实现此特性的浏览器,那目前最好的选择就是使用 PostCSS

本篇要点:

  • 自定义属性的概念
  • var()
  • calc()

引入

自定义属性,是一种开发者可以自主命名和使用的CSS属性。浏览器在处理像 color 、position 这样的属性时,需要接收特定的属性值,而自定义属性,在开发者赋予它属性值之前,它是没有意义的。所以要怎么给 CSS 自定义属性赋值呢?这倒和习惯无异:

.foo {
    color: red;
    --theme-color:gray;
}

自定义元素的定义由 -- 开头,这样浏览器能够区分自定义属性和原生属性,

假如只是定义了一个自定义元素和它的属性值,浏览器是不会做出反应的。如上面的代码, .foo 的字体颜色由 color 决定,但 --theme-color 对 .foo 没有作用

可以用 CSS 自定义元素存储任意有效的 CSS 属性值:

.foo {
    --theme-color:blue;
    --spacer-width: 8px;
    --favorite-number: 3;
    --greeting: "How are you";
    --reusable-shadow: 0 3px 1px -2px rgba(0,0,0,0.85);
}

使用

使用 var() 方法实现:

.button {
    background-color: var(--theme-color);
}

这段代码中,我们把.button的background-color属性赋值为 --theme-color的值。

同时,这个–theme-color能用在任意选择器和属性上:

.button {
    background-color: var(--theme-color);
}
p {
    color: var(--theme-color);
}
.title > .p {
    border-color: var(--theme-color);
}
  • 缺省值

如果开发者并没有定义过 --theme-color 这个变量呢?var()可以接收第二个参数作为缺省值:

.button {
    background-color: var(--theme-color,gray);
}

或者把另一个自定义属性作为缺省值:

.button {
    background-color: var(--theme-color,var(--default-bg-color));
}

传参数时总是传入一个缺省值是一个好习惯,特别是在构建 web components 的时候。为了让你的页面在不支持自定义属性的浏览器上正常显示,别忘了加上兼容代码:

.button {
    background-color:gray;//兼容性处理
    background-color: var(--theme-color,gray);
}

作用域和级联

自定义属性遵从标准的作用域和级联规则,开发者按照平时使用的习惯来就可以了!

你可能希望将 --theme-color 设置为全局变量,处处可用。最简单的方法是使用 :root 伪元素:

:root {
    --theme-color: gray;
}

这样,整个document,都可以使用--theme-color

但当你希望不同的模块使用不同的 --theme-color 值怎么办呢?

只需要在模块的作用域中给属性重新赋值,新的颜色就会分模块生效,而不需要开发者一个个重置使用到 --theme-color 的属性。

section.about {
    --theme-color: darkblue;
}
section.contacts {
    --theme-color: darkred;//重新赋值
}
section.news {
    --theme-color: yellow;
}

CSS计算

calc() 函数常常被用于跨单位的计算:

.child {
    width: calc(100% - 16px)
}

事实上这个计算是在浏览器运行时进行的,浏览器会将 calc()的计算结果以像素单位呈现在屏幕上。

  • calc() 与 CSS 自定义属性结合
:root {
    --base-size: 4px;
    --title-multiplier: 5;
    --body-multiplier: 3;
}
.title {
    text-size: calc(var(--title-multiplier) * var(--base-size))
}
.body {
    text-size: calc(var(--body-multiplier)* var(--base-size));
}

CSS 与 javascript之间的桥梁

自定义属性和 Sass、Less 或者 PostCSS 这些处理器语言一个非常重要的不同点在于:浏览器是可以解析自定义属性的。这就意味着开发者可以动态改变自定义属性的值。这是 CSS 迈出的一大步。

就和平时用 JS 操作元素任意的属性一般,自定义属性也可以通过 getPropertyValue setProperty 方法操作 :

const styles = getComputedStle(document.querySelector('.foo'));

const oldColor = styles.getPropertyValue('--color').trim();
foo.style.setProperty('--color','green');

属性值一旦被改变,所有与这个自定义属性相关的 CSS 属性也都会发生改变,。这样就能轻松实现批量修改元素的属性值。


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23605 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
22379 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
19922 0
使用SSH远程登录阿里云ECS服务器
远程连接服务器以及配置环境
14799 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
22590 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
36494 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
16558 0
+关注
前端修罗场
前端修罗场,CSDN 博客专家 华为云享专家,微信公众号同名。为你提供优质原创内容。三门课程作者:《ElementUI 详解与实战》| 《ThreeJS 在网页中创建动画》|《PWA 渐进式Web应用开发》。蓝桥云课2021年度人气作者Top2。前端进阶之路 | 中大厂、外企、国企内推 | 面试培训
223
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载