css变量，calc与自定义属性

最新推荐文章于 2023-09-24 09:40:35 发布

千击万磨还坚韧，任尔东西南北风

最新推荐文章于 2023-09-24 09:40:35 发布

阅读量244

点赞数

文章标签： css javascript html

本文链接：https://blog.csdn.net/qq_73917015/article/details/130538879

版权

css变量，calc与自定义属性

1.css变量
- 变量对大小写敏感
2.calc计算
- 运算之间要用空格隔开
- 运算符支持
3.data-*自定义属性

1.css变量

:root{
	--backgroundcolor:blue;//定义一个变量
	--fontsize:30px
}
//通过var使用
body{
	background-color:var(--backgroundcolor);
}

合理的使用css变量看可以很大程度的增加对代码的维护性，比如常用的白天黑夜的效果，只需要修改一下–backgroundcolor的值就好。

变量对大小写敏感

–my-color与–My-color不同

2.calc计算

运算之间要用空格隔开

calc对于响应式布局效果还是很大的；
比如你想让两个个元素占1/4.一个元素占1/2；你就可以用到计算了calc

<style>
#frame{
 display:flex;
}
.div1{
	height:100px;
	width:calc( 100% / 4 );//运算符之间隔开
}
.div2{
	height:100px;
	width:calc(100%2);
}
</style>
<body>
	<div id="frame">
		<div class="div1"></div>
		<div class="div1"></div>
		<div class="div2"></div>
	</div>
</body>

肯定会有人觉得多此一举，很多方法可以代替，但这只是简单的例子，可以解决响应式布局，页面表现得更流畅，巧妙运用可以方便很多。

运算符支持

calc()函数支持 “+” , " - " , " * " , " / " 运算

3.data-*自定义属性

当一个元素有伪元素after,before等时，因为为伪元素不dom树里，无法用正常的方法修改content，但在可以通过js修改该伪元素的content内容。
专业解释：data-* 全局属性是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本在 HTML 与 DOM 表现之间进行专有数据的交换。

//body里
<div id="div" data-text=""></div>
//css里
div::after{
	content:attr(data-text);
	width:100px;
	height:100px;
}
//js里
const div=document.getElementById("div");
div.attributes[1].value ="我是修改的值";
//或者
var div = document.getElementById('div');
        test.dataset.text= 'Byron';