css 元素实际宽高

首先定义一个div。

然发音用英语怎么说后稍微装修一下

下面开始区分

一、clientwidth和clientheigh 、 clienttop和clientleft

1，clientwidth的实际宽度

clientwidth =width+左右padding

2，clientheigh的实际高度

clientheigh = height + 上下padding

3，clienttop的实际宽度

clienttop = boder.top(上边框的宽度)

4，clientleft的实际宽度

clientleft = boder.left(左边框的宽度)

二、offtwidth和offthight 、offttop和offtleft

1,offtwidth的实际宽度

offtwidth = width + 左右padding + 左右boder

2,offtheith的实际高度法学在职研究生

offtheith = height + 上下padding + 上下boder

3，offttop实际宽度

offttop：当前元素 上边框 外边缘 到 最近的已定位父级（offtparent） 上边框 内边缘的 距离。如果父

级都没有定位，则分别是到body 顶部 和左边的距离

4，offtleft实际宽度

offtleft：当前元素 左边框 外边缘 到 最近的已定位父级（offtparent） 左边框 内边缘的 距离。如果父级都没有定位，则分别是到body 顶部 和左边的距离

三、scrollwidth和scrollheight 、 scrolltop和scrollleft

1，scrollwidth实际宽度

scrollwidth：获取指定标签内容层的真实宽度（可视区域宽度+被隐藏区域宽度）。

2，scrollheight的实际高度

scrollheight：获取指定标签内容层的真实高度（可视区域高度+被隐藏区域高度）

3，scrolltop

scrolltop :内容层顶部 到 可视区域顶部的距离。

实例：

var scrolltop = document.docume新疆喀纳斯ntelement.scrolltop || window.pageyofft || document.body.scrolltop;

持续获取高度的方式：

window.addeventlistener('scroll', ()=>{　　var scrolltop = document.documentelement.scrolltop || window.pageyofft || document.body.scrolltop;});

4，scrollleft

scrollleft:内容层左端 到 可视区域左端的距离.