在css中使用函数,减少js代码

博主昨天才发现原来css里也是有函数的,【为我以前浪费在写调整样式的js代码上的时间默哀

我现在知道的css函数有这么几个

attr()
calc()  /*opera不支持*/
counter()
cycle() /*支持情况不明*/  
max()   /*支持情况不明*/
min()   /*支持情况不明*/

个人认为里面最实用的就是calc

先举个例子,现在这里有个div,我给了它一个class:youjiecao
为了让大家看见它,我给他加上边框

这里是它的样式

.youjiecao{
   position:relative;
   width:400px;
   height:200px;  
   border:1px solid #777; 
}

接下来我们就用这个div来实验

首先,当你需要把这个div里的一个div(id=”child1″)左边靠拢,上下贴紧,只有右边留40px的时候怎么做?

如果用js混css,那会是这个样子(这里就不简化代码了)

css:
#child1{
   position:absolute;
   top:0;
   left:0;
   height:100%;
}

javascript:
/*一般情况下都是父元素会改变大小才会有这种需求,所以用到onresize*/
window.onresize=function(){
document.getElementById("child1").style.width=document.getElementById("child1").parentNode.offsetWidth-40;
}
/*另外还要给宽度初始化一下我就不写了*/

如果有人问为什么不直接写

#child1{
   position:absolute;
   top:0;
   left:0;
   right:40px;/*直接设置右边40px*/
   height:100%;
}

那是因为这种写法不知道为什么我个人测试只在webkit核浏览器有效,在其它浏览器里这样写会直接残掉。。

然后我们来看一下纯css的写法

#child1{
   position:absolute;
   top:0;
   left:0;
   width:calc(100% - 40px);/*使用css函数来设置宽度*/
   height:100%;
}
注:100% – 40px中数值和运算符号间必须加空格,否则规则会无效

这么做直接省略了resize,而且少(gen)了(ben)不(bu)少(yong)js代码

下面这个youjiecao的div被强制设定成了90%宽度,里面有刚刚提到的child1,这是用css直接做出来的效果,如果你什么也没看到说明你的浏览器不支持calc函数

民那可以拉动浏览器窗口来看变化,为了民那可以看见child1,我给它加上了背景色

 


以下是还没实现的方法
将来你想把一个不确定宽度的div做成正方形,而不用js,你或许可以这么写

 


再说明一遍,这种写法现在似乎还没有浏览器支持

目前我了解的只有calc函数,其他的还没有多做研究,所以在这里就不误导了。



本文发布于 https://luojia.me

本站文章未经文下加注授权不得拷贝发布。

0 0 投票数
打分
订阅评论
提醒
guest
1 评论
内联反馈
查看所有评论