点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

DOM之度量计算_html/css

来源：懂视网责编：小采时间：2020-11-27 16:39:07

DOM之度量计算_html/css

DOM之度量计算_html/css_WEB-ITnose:javascript是可以控制标签元素的位置的. 例如一个提示消息, 跟着鼠标的位置移动. 这章节,我们来看看如何获得和计算元素的坐标和他们的位置. 前提: CSS盒子模型下面画出了CSS盒子模型: 详细的可以查看CSS盒子模型说明.https://www.w3.org

推荐度：

点击下载本文 文档为doc格式

导读DOM之度量计算_html/css_WEB-ITnose:javascript是可以控制标签元素的位置的. 例如一个提示消息, 跟着鼠标的位置移动. 这章节,我们来看看如何获得和计算元素的坐标和他们的位置. 前提: CSS盒子模型下面画出了CSS盒子模型: 详细的可以查看CSS盒子模型说明.https://www.w3.org

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

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<8和IE8兼容模式 : document.documentElement (或者 document.body 在异常模式下) 从文档的左上角会有一点点改变.没有边框, 但是 document.body.clientLeft/clientTop 在这种情况下不等于0 (通常是2).

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 ,欢迎大家传播与分享.

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

DOM之度量计算_html/css

推荐度：

点击下载本文 文档为doc格式

标签：计算 html css

热门焦点

DOM之度量计算_html/css

DOM之度量计算_html/css

前提: CSS盒子模型

文档实例

Box metrics

所有Javascript度量都是像素, 且在属性值结尾不需要 'px'.

如果没有padding, box可以滚动, clientWidth/Height则显示的是内容的区域大小:

两种特殊的情况:

总结:

DOM之度量计算_html/css

最新推荐

猜你喜欢

热门推荐