爱米*阅

不是日志,不是剪切板

测测有多高 - [技术 | Tech]

发布时间   2010-12-16 @ 15:42:00 标签    元素 盒子 位置 编辑 | 分享 0

版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://www.blogbus.com/amixyue-logs/89674494.html

作者按:

网页元素的高度一直是个很纠结的事情,本文为了不再纠结。

假设

元素有 margin border padding content

其中

margin + border + padding + content 叫做 盒子领域

border + padding + content 叫做  盒子

padding + content 叫做 盒内

content 叫做 内容区

目标(target)元素

:t-margin t-border t-padding t-width t-height

父(parent)元素

:p-margin p-border p-padding p-width p-height

子(child)元素

:c-margin c-border c-padding c-width c-height

结论

offset

定位 如static/relative absolute相关,当 absolute 的时候,相对于定位父元素的位置,和 目标盒子 的宽、高

offSetHeight = t-border-top + t-padding-top + t-height + t-padding-bottom + t-border-bottom

offSetWidth = t-border-left + t-padding-left + t-width + t-padding-right + t-border-right

scroll

描述了 子盒子领域 相对于 目标盒子 的位置(只有正值),和 子盒子领域 的宽、高 + 目标元素 的 padding(目标元素盒内 的绝对宽、高)

scrollHeight = t-padding-top +c-margin-top+ c-border-top + c-padding-top + c-height + c-padding-bottom + c-border-bottom +c-margin-bottom+ t-padding-bottom

scrollWidth = t-padding-left + c-margin-left + c-border-left + c-padding-left + c-width + c-padding-right + c-border-right + c-margin-right + t-padding-right

client

描述了 子盒内 相对于 目标内容区 的位置,和 目标盒内 的宽、高

clientLeft = t-padding-left  + c-margin-left + c-border-left

clientTop=  t-padding-top + c-margin-top + c-border-top

clientHeight = t-height

clientWidth = t-width

应用

计算元素页面位置

:目标元素出发,向上到 document.body ,加和 offsetTop offsetLeft p-border ,再加上 body 的 border & margin ,和 document.scrollLeft document.scrollTop;

其实,在 Gecko1.9+ 和ie 下有更好的 getBoundingClientRect

在 safari/opera 又有新的注意点

最好,还是自己整个 API 自己用吧

其它应用

分享到:

    评论

  • 其实晓得了地址,我也蛮开心
  • 你告诉我博客地址,我很开心~
    回复synmyth说:
    必须的!
    而且我自己YY 的模板,够丑吧~
    2010-12-16 22:59:54
  • 为虾米我一直觉得你发布时间那块那么丑啊那么丑=-=~~~特别是在首页。。恩恩就是首页忍无可忍啦!!