CSS自定义属性的作用
使用css的自定义属性可以精简代码、动画效果的实现等。
自定义属性的声明和使用
自定义属性名的声明规则
- CSS自定义属性名必须是以双横线开头，即
-- - CSS自定义属性名中只能包含数字
[0-9]、字母[a-zA-Z]、下划线_、横线-。 - CSS自定义属性名对大小写敏感。
- CSS自定义属性名的位置和css属性的位置相同，可以是具体标签的
style属性的位置，也可以是CSS选择器的位置
CSS选择器: {
--自定义属性名: 自定义属性值;
}
<标签 style="--自定义属性名: 自定义属性值;"></标签>
自定义属性名的使用
- 使用
var(变量名)来使用一个变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
:root {
--color: red;
}
div {
text-align: center;
/* 自定义变量的使用 */
color: var(--color);
}
</style>
</head>
<body>
<div>
id属性值
</div>
</body>
</html>
效果：
var(自定义属性名).png
- 值的类型是
字符串的时候，可以直接拼接， 不需要+进行连接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
:root {
--content: "value的类型是String";
}
body::after {
content: "--content: " var(--content);
}
</style>
</head>
<body>
</body>
</html>
效果：
值类型是字符串，直接拼接.png
-
值的类型是
数字的时候，必须使用calc(var(变量)*1px)进行单位的添加。
值类型是数值，必须使用calc()进行拼接.png 自定义属性值的默认值设置
var(变量名, 默认值)
默认值的设置可以自定义变量未定义错误的出现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
:root {
--size: 35;
}
div {
font-size: calc(var(--s, 10) * 1px);
}
</style>
</head>
<body>
<div>
主体的内容
</div>
</body>
</html>
效果：
var()函数中的默认值的设置.png
- 自定义的属性已经正确定义，但是变量的值不正确，则使用缺省值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
:root {
--color: 20px;
background: black;
color: white;
}
#div1 {
background-color: #369;
background-color: var(--color, #cd0000);
}
#div3 {
background: #0000FF;
}
</style>
</head>
<body>
<div id="div1">
div1的内容[css自定义属性值的类型错误]
</div>
<div id="div2">
div2的内容[使用默认的背景色]
</div>
<div id="div3">
div3的内容[设置的背景色]
</div>
</body>
</html>
效果：
值的类型出错时，使用的是默认值.png
CSS自定义属性的作用域和继承性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
:root {
--size: 20;
}
#div1 {
--size: 15px;
--color: red;
font-size: calc(var(--size) * 1px);
}
#div1 #div1_1 {
margin-left: 10px;
color: var(--color);
font-size: calc(var(--size) * 1px);
}
#div2 {
font-size: calc(var(--size) * 1px);
}
#div2 #div2_1 {
margin-left: 10px;
font-size: calc(var(--size) * 1px);
}
</style>
</head>
<body>
<div id="div1">
div1
<div id="div1_1">
div1_1
</div>
</div>
<div id="div2">
div2
<div id="div2_1">
div2_1
</div>
</div>
</body>
</html>
CSS属性自定义变量的作用域是在当前标签和子标签中有用，并具有继承性。
CSS自定义属性的作用域和继承性.png
JS操作CSS自定义的变量
JS读取CSS自定义的变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
:root {
--color: red;
}
div{
color: var(--color);
}
</style>
</head>
<body>
<div>
div1
</div>
<script type="text/javascript">
//读取
var root = getComputedStyle(document.documentElement);
console.log(root)
var color = root.getPropertyValue('--color').trim();
console.log(color); // red
</script>
</body>
</html>
效果：
js读取CSS自定义变量.png
JS修改CSS自定义的变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
:root {
--color: red;
}
div{
color: var(--color);
}
</style>
</head>
<body>
<div>
div1
</div>
<script type="text/javascript">
//读取
var root = getComputedStyle(document.documentElement);
//改变
document.documentElement.style.setProperty('--color', 'yellow');
var color = root.getPropertyValue('--color').trim();
console.log(color); // yellow
</script>
</body>
</html>
js修改CSS自定义的属性.png
JS删除CSS自定义的变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
:root {
--color: red;
}
div{
color: var(--color);
}
</style>
</head>
<body>
<div>
div1
</div>
<script type="text/javascript">
//读取
var root = getComputedStyle(document.documentElement);
//删除
document.documentElement.style.removeProperty('--color');
var color = root.getPropertyValue('--color').trim();
console.log(color);
</script>
</body>
</html>
js删除CSS自定义的属性.png
