<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* :root 全局定义*/
:root {
/* 变量声明的时候前面加两根连词线-- */
--font-size: 200px;
/* 设置颜色会替换默认值 */
--color: pink;
/* 字符串变量 必须使用引号 */
--a:'hello';
--b:'world';
/* 定义的size没有单位px */
--size: 50;
}
/* 使用方法 */
.myvarible {
font-size: var(--font-size);
/* 使用可以设置默认值 */
color: var(--color, red);
}
/* after可以在元素的后面加入内容*/
.myvarible:after {
/* 这里加入的是abc*/
/* content: 'abc'; */
/* 这里拼接css变量 注意：只能拼接字符串*/
content: var(--a)var(--b)
}
.main {
/* 使用变量--siza 使用calc计算 好处在于1px可以变化 比如2px的时候为150px */
font-size: calc(var(--size) * 2px)
}
</style>
</head>
<body>
<div class="myvarible"></div>
<div class="main">非字符串</div>
// js操作css变量
<script>
// 获取 :root
var root = document.querySelector(':root')
var style = getComputedStyle(root)
// 拿到style里面属性值trim 因为拿到的值前面有空格 所以使用trim方法去掉空格
var color = style.getPropertyValue('--color').trim()
// 设置属性
root.style.setProperty('--color','red')
</script>
</body>
</html>
Css 变量使用方法
猜你喜欢
转载自blog.csdn.net/weixin_44640323/article/details/108563727
今日推荐
周排行