JS中位置和尺寸的获取方法

时间：2021-09-11 来源：互联网编辑：宝哥软件园浏览：次

scrollheight、clientheight和offsetheight之间的区别

描述：

scroll height:DOM元素实际内容的高度，不包括边框的高度，会随着DOM元素中内容的增加而增加(超出可视区域后)。

client height:DOM元素内容可见区域的高度，不包括滚动条和边框的高度。

右边：DOM元素的整体高度，包括滚动条和边框。

当滚动条没有出现时

此时，DOM元素中没有内容或者内容没有超过可视区域scrollWidth=clientWidth，两者都是可视区域的宽度。ScrollHeight=clientHeight，两者都是可视区域的高度。偏置宽度和偏置高度是DOM元素的整体宽度和高度。

当滚动条出现时，

此时，DOM元素中没有内容，或者内容没有超出可视区域。scroll width client width scrollHeight scroll width和scroll height分别是实际内容的宽度和高度。clientwidth和clientHeight是内容可视区域的宽度和高度。偏置宽度和偏置高度是DOM元素的整体宽度和高度。

Demo:

！doctype html lang=' en ' head meta charset=' utf-8 ' title正确理解和应用与大小相关的DOM属性/title styletype=' text/CSS' html，body { margin : 0；}车身{ padding: 100px} # box { overflow:滚动；宽度： 400 px；height: 300pxpadding: 20pxborder: 10px固体# 000；margin: 0 auto盒子大小：内容盒；/* box-sizing:content-box表示元素的宽度和高度不包括内部边距和边框。box-sizing:border-box表示元素的宽度和高度包括内边距和边框的宽度和高度*/} # Box 2 { Border : 1pxsolid # 000；} /style/Head body div id='box' div id='box2 '谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌清除谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果浏览器测试结果Google browser测试结果Google browser测试结果Google browser测试结果Google browser测试结果Google browser测试结果/div/div脚本类型=' text/JavaScript '/offsetwith，offsetHeight对应盒子模型的宽度和高度//scrollWidth，scrollHeight对应滚动区的宽度和高度，但不包括滚动条的宽度！滚动区域由填充和内容组成。

//clientWidth，clientHeight你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂var box=文档。getelement byid(' box ')；var box=文档。getelement byid(' box 2 ')；//-你好滚动宽度你是谁，哎哎哎哎：滚动溢出阿云，滚动宽度急什么客户宽度(客户宽度)阿金，张伯伦医生控制台。日志('滚动宽度3360 '框。滚动宽度)；//423控制台。log('滚动高度3330 '框。滚动高度)；//672 //clientWidth-什么clientHeight哎哎哎哎偏移第(偏移宽度)-什么右偏(偏移高度)吕惠卿与吕惠卿(-什么20px，哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟20px)唉呀呀呀呀呀呀呀呀呀呀呀呀呀呀（铬你是说.17像素。日志('客户端宽度3360 '框。客户端宽度)；//423=460-20-17控制台。日志('客户端高度： '框。客户端高度)；//323=360-20-17//offset with-什么右偏(偏移高度)-什么铬（铬)是孙悟空还是孙悟空控制台。log(' offset with 3360 '框。offset with)；//460=宽度填充边界控制台。原木('偏右3360 '箱。右偏)；//360=高度填充边界/脚本/主体/html哎哎哎联署材料阿宽多姆魏冄

获取html根元素：document.documentElement获取正文元素：document.body

获取页面可见区域的宽度和高度，不包括滚动条IE、FF和chrome。使用document . document element . client width和document . document element . client height注意：在ie6标准模式下，上述方法可以是

在混杂模式下：ie6使用document.body.clientWidth和document.body.clientHeight注意：window.innerWidth/Height包括滚动条的宽度和高度。这也是和document.documentElement.clientWidth/Height.的区别，所以使用时要注意兼容书写：

演示

！doctype html lang=' en ' head meta charset=' utf-8 ' title page视口宽度和高度/title/head body script type=' text/JavaScript '/standard mode var w=document . document element . client width；var h=document . document element . client height；Console.log('w宽度：' w '-' h高度：' h ')；//混杂模式var width=document . body . client width；var height=document . body . client height；//兼容写入varww=document . document element . client width | | document . body . client width；var hh=document . document element . client height | | document . body . client height；console . log(' ww wide:' ww '-' hh high:' hh ')；/script/body/html获取普通html元素的大小

docE.offsetWidth右边；

获取滚动条的滚动高度(兼容性处理)

var oTop=document . document element . scroll top | | document . body . scroll top；

偏置中间偏置右边

这两个属性表示元素可视区域的宽度和高度。该值包括边框、水平填充、垂直滚动条的宽度或高度以及元素本身的宽度或高度。

offsetWidth和offsetHeight的值只与此元素相关，而与周围的元素(父元素和子元素)无关。偏移宽度=(边框宽度)*2(左填充)(宽度)(右填充)

偏右=(边框-宽度)*2(填充-顶部)(高度)(填充-底部)

偏移偏移和偏移偏移

offsetLeft和offsetTop这两个属性值与offsetParent相关。

offsetParent属性返回一个对象的引用，该对象最接近调用offsetParent的元素(在包含层次结构中最接近)，并且是一个CSS定位的容器元素。如果这个容器元素不是面向CSS的，那么offsetParent属性就是根元素(也就是主体元素)的引用。

两条规则：

如果当前元素的父元素不是CSS定位的(位置是绝对的或相对的)，offsetParent就是body。