DOM之度量计算_html/css_WEB
javascript是可以控制标签元素的位置的. 例如一个提示消息, 跟着鼠标的位置移动. 这章节,我们来看看如何获得和计算元素的坐标和他们的位置. 前提: 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
接下来我们学习关于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 内容区域的宽度和高度,包括滚动部分
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. 这是外框盒子的样子.
clientTop/Left 盒子外框的client区域的缩进. 换句话说,就是top/left的大小, 单位像素.
两种特殊的情况:
offsetParent , offsetLeft/Top 属性offsetLeft和offsetTop反映了一个元素相对于他的offsetParent的相对移动. offsetParent是在布局中的父元素. 比如, 如果一个元素是绝对定位, offsetParent不是他的DOM父元素. 而是一个离他最近的定位的元素(或者body). offsetParent规则 :
看不见的元素 JavaScript的坐标和尺寸设置仅为连接和显示元素 他们值等于0的元素, display:none或者DOM以外的. offsetParent是为null的. 如果一个元素隐藏, 我们可以使用下面的做检查: function isHidden(elem) return !elem.offsetWidth && !elem.offsetHeight }
总结:属性说明:
下面概要了所有属性的含义:
本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=232 ,欢迎大家传播与分享. |