这章节,我们来看看如何获得和计算元素的坐标和他们的位置.
前提: css盒子模型
下面画出了css盒子模型:
详细的可以查看css盒子模型说明.https://www.w3.org/tr/css22/学习盒子模型的组成是其他知识点的基础.
文档实例 我们使用下面的box做演示:
## introduction the contents.
box是绝对定位的, 有边框, 内边界, 外边界和 滚动条:
#example { position: absolute; width: 300px; height: 200px; left: 160px; top: 160px; padding: 20px; margin: 20px; overflow: auto; border: 25px solid #f0e68c;}
css图片:
box metrics css width/height
内容区域的大小在padding以内. css属性的设置使用element.style, 获取用getcomputedstyle()/currentstyle. 更详细的内容, 关注我们后面的文章.
接下来我们学习关于width和height的另外的属性.
所有javascript度量都是像素, 且在属性值结尾不需要 'px'.
clientwidth/height
client区域大小: 包含padding的内容区域大小, 但是不包括滚动条.
大小计算如下:
clientwidth = 300(width) + 40(paddings) - 16(scrollbar) = 324
clientheight = 200(height) + 40(paddings) = 240
如果没有padding, box可以滚动, clientwidth/height则显示的是内容的区域大小:
在上面的图片中, css width包含了滚动条. 所以不能按实际的300像素来计算. clientwidth才是有效的内容区域.
scrollwidth/height
内容区域的宽度和高度,包括滚动部分
scrollheight = 723 :全部高度, 包含滚动的部分
scrollwidth = 324 :全部宽度,包含滚动的部分
scrollwidth/height 作为 clientwidth/height 的话, 使用是一样的 , 但是他们包含滚动区域.
下面代码改变元素的垂直大小, 显示所有的内容
element.style.height = element.scrollheight+ 'px'
scrolltop/scrollleft
滚动出的部分大小:垂直和水平. 值的单位也是像素.
下面图说明了一个垂直滚动的盒子的scrollheight和scrolltop.
scrollleft/scrolltop 是可写的
不像另外的属性, 都是可读的. scrollleft/scrolltop是可以被改变的.来改变元素的滚动.
在标准模式中.document的滚动是在document.documentelement下.
offsetwidth/height
外框盒子的 width/height, 包含border,不包含margin.
这是外框盒子的样子.
offsetwidth = 390 : 外框盒子宽度
offsetheight = 290 : 外框盒子高度
clienttop/left
盒子外框的client区域的缩进.
换句话说,就是top/left的大小, 单位像素.
两种特殊的情况: clientleft = 25 : left大小
clienttop = 25 : top大小
从右往左的文档(阿拉伯语,犹太人), clientleft属性也包含右边的滚动大小
ie
offsetparent , offsetleft/top
属性offsetleft和offsettop反映了一个元素相对于他的offsetparent的相对移动. offsetparent是在布局中的父元素. 比如, 如果一个元素是绝对定位, offsetparent不是他的dom父元素. 而是一个离他最近的定位的元素(或者body).
offsetparent规则 :
静态定位: 最近的表格单元格或者body(标准模式下)
定位的其他模式: 最近的定位元素
看不见的元素
javascript的坐标和尺寸设置仅为连接和显示元素
他们值等于0的元素, display:none或者dom以外的. offsetparent是为null的.
如果一个元素隐藏, 我们可以使用下面的做检查:
function ishidden(elem)
return !elem.offsetwidth && !elem.offsetheight
}
如果父元素是display:none, 执行正常.
除了tr元素执行正常, 在某些浏览器重,tr会有bug. 但是我们通常是检查另外的元素, 所以使用正常
如果元素是visibility:hidden或者定位off-screen, 这样检查就失效了. 空元素同样也被隐藏.
总结: 属性说明:
clientwidth/clientheight - 在border里的区域, client区域包含padding,但不包含滚动区域.
clientleft/clienttop - left/top大小或者说, 盒子左上角的client区域的移动. ie在也是一样, 因为document.body可能被移动.
scrollwidth/scrollheight - 包含滚动的内容区域, 但不包含滚动条本身自己的大小
scrollleft/scrolltop - 滚动条的移动部分, 从左上角开始.
offsetwidth/offsetheight -包含margin的盒子大小
offsetparent - 静态的定位相对于最近的单元格, body.或者最近的定位元素.
offsetleft/offsettop - 盒子的左上角的位置相对于offsetparent.
下面概要了所有属性的含义:
本文属于吴统威的博客, 微信公众号:bianchengderen,qq群:186659233 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=232 ,欢迎大家传播与分享.