下面将给大家分享一些前端开发的技巧,希望能对你有所帮助。
一、Datalist元素不知为什么,这个元素不太被人所使用。datalist标签被用于为input元素提供一个“自动补全”的功能
例如
datalist的id必须和input的list属性一致,这样才能使这两个元素绑定在一起。
二、点击联动的标签和复选框如果你希望点击标签后复选框也发生相应操作,通常可以使用label元素的“for”属性,就比如下面代码:
实际上,也可以用label元素将复选框给包裹起来,可以达到同样点击“Iagree”来完成选择的效果。
三、CSS的子选择器也许在这些例子中“子选择器”使最常用的,但是多数人并不知道它究竟多强大。子选择器被用于匹配某个特定元素下的所有元素。它是两个元素的关联。
四、输出模式(Writingmode)输出模式是一个CSS非常强大的属性,但是很少有人知道,它可以让文本竖排显示:
一行代码即可完成writing-mode:vertical-rl;
完整的代码如下:
writing-mode有5种属性可用:
五、calc()方法calc()是CSS的方法,让你可以执行需要计算CSS属性的值时使用。它最强大的功能是可以混合多种单位进行计算,例如百分比和像素。不需要进行任何预先的处理,它在渲染时进行。
六、替代Math.round和Math.floor也许很容易理解,但依旧算是一个实用的技巧。
Math.floor()用0
:
Math.round()用+.5
0:
七、Console.table你也许听说过用console.log(),但你也许不知道用console.table()来输出数组或者对象。这会在控制台上优雅地显示一个表格。
数组:
八、Console.time另外一个非常实用的控制台方法console.time(),启动一个计时器。它将调用它的第一个参数视为一个标签。当你用同样的标签调用cosnole.timeEnd()时候,控制台输出从调用console.time()到console.timeEnd()的毫秒数。