关于CSS中函数的使用----var()函数 与 attr()函数
1 关于var()函数使用注意点:
这个函数的作用获取自定义属性的值
关于自定义属性:
1 出现位置
要么在
<style>
body{
--self-property: 1;
}
</style>
要么在
<div style="--self-property: 1"></div>
总之必须要在style中
2 格式要求:
自定义属性必须要加上 -- 前缀来标明这是一个自定义属性, 否则浏览器无法解析
3 获取方式:
var(--self-property) 直接获取, 不需要加引号, 一般会配合calc()函数来使用
4 高级使用案例
1 <div class="wavy"> 2 <span style="--i:1">内</span> 3 <span style="--i:2">容</span> 4 <span style="--i:3">加</span> 5 <span style="--i:4">载</span> 6 <span style="--i:5">中</span> 7 <span style="--i:6">.</span> 8 <span style="--i:7">.</span> 9 <span style="--i:8">.</span> 10 </div> 11 12 13 .wavy span{ 14 position: relative; 15 display: inline-block; 16 color: #ffffff; 17 font-size: 2em; 18 animation: animate 1s ease-in-out infinite; 19 animation-delay: calc(.1s*var(--i)); 20 }
这个直接通过使用CSS中的var()函数就完成了不同的元素的属性设置问题, 极具参考价值,
这个案例主要是展示了如果通过CSS获取一个元素在父元素中的位置, 极具参考价值
5 关于作用域的猜测, 感觉自定义属性会有一个类似于作用域的东西, 从最近层开始寻找, 找到了就获取值, 找不到逐级往上寻找, 直到找到为止
2 关于attr()函数使用注意点
attr()函数与var()函数有一个很大的相同之处, 都是获取属性值,
两个函数的不同点:
var()函数必须要获取内联属性, 即必须要是在啊style中的属性
attr()函数需要获取的标签中的属性, 也可以是自定义属性, 但是必须要是在标签中的属性
1 出现位置
<div self-property="value"></div>
2 获取方式
attr(self-property)
