你的位置:首页 > 软件开发 > Java > Js位置与大小(1)——正确理解和运用与尺寸大小相关的DOM属性

Js位置与大小(1)——正确理解和运用与尺寸大小相关的DOM属性

发布时间:2015-12-17 08:00:05
在web开发中,不可避免遇到要计算元素大小以及位置的问题,解决这类问题的方法是利用DOM提供的一些API结合兼容性处理来,所有内容大概分3篇左右的文章的来说明。本文作为第一篇,介绍DOM提供的与尺寸大小相关的DOM属性,提供一些兼容性处理的方法,并结合常见的场景说明如何正确运用这 ...

Js位置与大小(1)——正确理解和运用与尺寸大小相关的DOM属性

web开发中,不可避免遇到要计算元素大小以及位置的问题,解决这类问题的方法是利用DOM提供的一些API结合兼容性处理来,所有内容大概分3篇左右的文章的来说明。本文作为第一篇,介绍DOM提供的与尺寸大小相关的DOM属性,提供一些兼容性处理的方法,并结合常见的场景说明如何正确运用这些属性。

1. 正确理解offsetWidth、clientWidth、scrollWidth及相应的height属性

假设某一个元素的横纵向滚动条都拖动到最末端,则offsetWidth、clientWidth、scrollWidth等属性相应的范围如下图所示:

Js位置与大小(1)——正确理解和运用与尺寸大小相关的DOM属性

1)offsetWidth ,offsetHeight对应的是盒模型的宽度和高度,这两个值跟我们使用chrome审查元素时看到的尺寸一致:

Js位置与大小(1)——正确理解和运用与尺寸大小相关的DOM属性

2)scrollWidth,与scrollHeight对应的是滚动区域的宽度和高度但是不包含滚动条的宽度!滚动区域由padding和content组成。

3)clientWidth,clientHeight对应的是盒模型除去边框后的那部分区域的宽度和高度。

4)任何一个DOM元素,都可以通过以下api快速得到offsetWidth,clientWidth,scrollWidh及相关的height属性:

//domE为一个DOM Html Element对象domE.scrollWidthdomE.scrollHeightdomE.clientWidthdomE.clientHeightdomE.offsetWidthdomE.offsetHeight

原标题:Js位置与大小(1)——正确理解和运用与尺寸大小相关的DOM属性

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。