JS小技巧总结

来源:互联网 发布:字体管家软件下载 编辑:程序博客网 时间:2024/05/29 16:35

可以封装一个函数来获取父元素下不同类名称的元素数组

例如,有下面这样一种结构:

<div id="main">     <div class="box">       <div class="pic">          <img class="img" src="">       </div>     </div></div>

在操作元素时,我们想获取id为main下不同类名称的元素的集合,那么我们可以用下面这种方法来实现

//首先获取到最外层的盒子var oParent = document.getElementById("main");//通过class来获取元素function getByClass(parent,clsName){   var boxArr = new Array();//用来存储获取到的所有class为clsName的元素   oElements = parent.getElementsByTagName('*');//将父元素下所有的元素都获取到   for(var i = 0;i<oElements.length;i++){      if(oElements[i].className == clsname){        boxArr.push(oElements[i]);      }   }   return boxArr;}获取到oparent元素下所有className为box的元素var oBoxs = getByClass(oParent,box);

scrollWidth,clientWidth,offsetWidth的区别

在做瀑布流的时候要获取元素的宽度,使用了offsetWidth这个属性,于是看了一下和其他两个获取对象宽度的方法的区别

scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。
clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。
offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。

在页面内放入一个textarea元素,采用默认宽高显示,举例说明:

情况1:

元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下。

scrollWidth=clientWidth,两者皆为内容可视区的宽度。

offsetWidth为元素的实际宽度。

情况2:

元素的内容超过可视区,滚动条出现和可用的情况下。

scrollWidth>clientWidth。

scrollWidth为实际内容的宽度。

clientWidth是内容可视区的宽度。

offsetWidth是元素的实际宽度。

简便方法求数组中的最小值

存在一个数组var array = [17,6,1,9];
如何快速的求得数组中的最小元素?
我们知道使用Math.min()方法可以取得一组数中最小值
console.log(Math.min(3,1,5));//1
但是该方法接受的是一组数,而不能将数组作为参数直接传入
我们可以使用下面这种方法:
Math.min.apply(null,array);

瀑布流:

原创粉丝点击