为什么提示Cannot set property 'top' of undefined呢

来源:2-4 JavaScript实现瀑布流布局中图片排序

一仁

2016-05-19 21:46

var hArr = [];
for(var i=0;i<oBoxs.length;i++){
   if(i<cols){
       hArr.push(oBoxs[i].offsetHeight);
   }else{
       var minH = Math.min.apply(null,hArr);//求每一列图片的高度的最小值
       var index = getMinhIndex(hArr,minH);
       oBoxs[i].style.position='absolute';
       oBoxs[i].style.offset.top = minH + 'px'; //该行报错,不明白具体是什么原因呢
       console.log(oBoxs[index].offsetLeft);
       oBoxs[i].style.offset.left=oBoxW*index+'px';
       //oBoxs[i].style.offset.left=oBoxs[index].offsetLeft+'px';
   }
}

控制台报错,提示waterfall.js:25 Uncaught TypeError: Cannot set property 'top' of undefined

写回答 关注

1回答

  • 一仁
    2016-05-19 21:54:58

    我知道哪里错了,我把style.left和offsetLeft搞混淆了。百度了解了一下,具体区别如下:

    1.定义:

    offsetLeft: 获取的是当前对象左侧距离父对象左侧的值(均不包含border);

    style.left: 获取或设置相对于具有定位属性(position定义为relative)的父对象的左边距;

    还有个clientLeft:获取的是当前对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离,. 

    2.如果父对象的position定义为relative,子对象的position定义为absolute,那么子对象的style.left的值是相对于父对象的值,等同于offsetLeft的值.

    3.区别:

    - style.left 返回的是字符串"50px",offsetLeft返回的是数值50,如果需要对取得的值进行计算,用offsetLeft比较方便,不需要用parseInt(style.left).

    -  style.left是可以设置或更改,offsetLeft是只能获取不能更改的,因此要改变子对象的位置,只能修改style.left的值。

    -  style.left的值需要 事先定义 ,而且 要定义相应对象的标签里 (即内联style),就如上面用内嵌style的话,获取不到style.left的值.但是offsetLeft则可以取到.


瀑布流布局

瀑布流布局是网站比较流行的一种布局方式,教你实现三大方式

97758 学习 · 736 问题

查看课程

相似问题