css 变量
声明 css 变量
- 在
{}
内声明,变量名前加--
连接线。
如需创建具有全局作用域的变量,请在 :root 选择器中声明它。 :root 选择器匹配文档的根元素。
如需创建具有局部作用域的变量,请在将要使用它的选择器中声明它。
:root {
--color: blue;
}
body {
--text-color: red;
}
.boy {
--background-color: blue;
}
- 变量名大小写敏感,字母完全相同,但大小写不同视为不同的变量。
:root {
--color: blue;
--Color: red;
}
- 变量值只能用作属性值,不能用作属性名。
.box {
--side: top;
/* 无效 */
var(--side): 10px;
}
var() 函数
<div class="box">1</div>
- 读取变量
:root {
--color: blue;
}
.box {
background:var(--color);
}
- 用来声明变量
:root {
--color: red;
--text-color: var(--color);
}
var()
函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。
color: var(--text-color, #7F583F);
- 第二个参数不处理内部的逗号或空格,都视作参数的一部分。(这个不懂什么意思)
:root {
var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);
}
- 如果变量值是一个字符串,可以与其他字符串拼接。
<style type="text/css">
:root {
--Hi: 'hello';
--Name: var(--Hi)' world';
}
.box::after {
content: var(--Name);
}
</style>
<div class="box"></div>
- 如果变量是数值,需要使用calc()函数拼接才能拼接。
<style type="text/css">
:root {
--nub: 30;
--pd: calc(var(--nub)*1px);
}
.box {
display: inline-block;
background-color: red;
padding: var(--pd);
}
</style>
<div class="box"></div>
- 如果变量带有单位,不可以写成字符串形式。
<style type="text/css">
:root {
--pd: '30px'; // 无效
--pd: 30px; // 有效
}
.box {
display: inline-block;
background-color: red;
padding: var(--pd);
}
</style>
<div class="box"></div>
作用域
优先级最高的声明生效。
<style>
:root {
--color: blue;
}
body {
--color: red;
}
.box {
--color: black;
}
.box::before {
color: var(--color);
font-size: var(--size);
content: "你好";
display: block;
}
</style>
<div class="box" style="--color:#999999;--size:40px;">hello</div>
js 操作 css 变量
<!DOCTYPE>
<html>
<head>
<style type="text/css">
:root {
--primary: red;
--show: none;
}
.box {
padding: 30px;
background-color: var(--primary);
}
#btns {
display: var(--show);
}
</style>
</head>
<body>
<div class="box"></div>
<div id="btns">
<button onclick="setProperty()">设置变量</button>
<button onclick="getPropertyValue()">读取变量</button>
<button onclick="removeProperty()">删除变量</button>
</div>
</body>
<script type="text/javascript">
const isSupported =
window.CSS &&
window.CSS.supports &&
window.CSS.supports('--a', 0);
if (isSupported) {
/* supported */
document.documentElement.style.setProperty('--show', 'block');
} else {
/* not supported */
}
// 设置变量
function setProperty() {
document.documentElement.style.setProperty('--primary', '#7F583F');
}
// 读取变量
function getPropertyValue() {
console.log(document.documentElement.style.getPropertyValue('--primary').trim())
}
// 删除变量
function removeProperty() {
document.documentElement.style.removeProperty('--primary');
}
</script>
</html>
参考文章
https://www.w3school.com.cn/css/css3_variables.asp
http://www.ruanyifeng.com/blog/2017/05/css-variables.html
https://juejin.cn/post/6883759797338898439
https://blog.csdn.net/weixin_33705053/article/details/88586828
转载请注明来源:《 css 变量》- rojerYong's Blog
文章链接:https://www.eoway.cn /article/1615445993.html如果此文摘取了你的原创,请联系本站管理员,将对此文修改、删除处理。
--END--
推荐
- 微信小程序打包,主包和分包都小于2m,却上传失败
- 微信公众号网页,微信jssdk需要刷新页面才可以使用
- uniapp 微信小程序背景音频播放 uni.getBackgroundAudioManager()
- uniapp 苹果授权登录
- uniapp app 跳转到微信小程序
- js常用方法
- css 变量
- uniapp 微信公众号网页 打开小程序
- 小程序分享到朋友圈时设置path的query参数,判断用户是否通过朋友圈进入小程序
- uniapp解决原生组件层级过高覆盖页面组件的问题
- js判断是否ie浏览器、ie浏览器版本
- uniapp 设置 APP 首次打开时显示“用户协议和隐私政策”弹框
- uniapp,app端打开第三方应用(高德地图、百度地图、腾讯地图,apple地图进行导航)
- uniapp,ios打开apple地图显示自定义地点信息
- 微信小程序通过map组件获取中心点高精度经纬度以及解决ios系统map组件moveToLocation无效问题
- web性能优化,使用preload和prefetch预加载资源