JS中位置与大小的获取方法


Posted in Javascript onNovember 22, 2016

scrollHeight,clientHeight,offsetHeight的区别

说明:

scrollHeight:DOM元素的实际内容的高度,不包border的高度,会随DOM元素中内容的增加(超过可视区后)而变大。

clientHeight:DOM元素内容可视区的高度,不包含滚动条和边框的高度。

offsetHeight:DOM元素整体的高度,包括滚动条和边框。

JS中位置与大小的获取方法

当滚动条不出现的时候

这时候DOM元素中没有内容或者内容不超过可视区
scrollWidth=clientWidth,两者皆为可视区的宽度。
scrollHeight=clientHeight,两者皆为可视区的高度。
offsetWidth、offsetHeight为DOM元素的整体宽度和高度。

当滚动条出现的时候

这时候DOM元素中没有内容或者内容不超过可视区
scrollWidth>clientWidth
scrollHeight>clientHeight
scrollWidth和scrollHeight分别是实际内容的宽度和高度
clientWidth和clientHeight分别是内容可视区的宽度和高度
offsetWidth、offsetHeight为DOM元素的整体宽度和高度。

Demo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>正确理解和运用与尺寸大小相关的DOM属性</title>
    <style type="text/css">
    html,body {margin: 0;}
    body {padding: 100px;}
  #box {
    overflow: scroll;
    width: 400px;
    height: 300px;
    padding: 20px;
    border: 10px solid #000;
    margin: 0 auto;
    box-sizing: content-box;
    /*
    box-sizing:content-box表示元素的宽度与高度不包括内边距与边框的宽度和高度
    box-sizing:border-box表示元素的宽度与高度包括内边距与边框的宽度和高度
     */
  }
  #box2 {
    border: 1px solid #000;

  }
    </style>
  </head>
  <body>
  <div id="box">
    <div id="box2">谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果</div>
  </div>
  <script type="text/javascript">
  //offsetWidth ,offsetHeight对应的是盒模型的宽度和高度
  //scrollWidth,与scrollHeight对应的是滚动区域的宽度和高度,但是不包含滚动条的宽度!滚动区域由padding和content组成。
  //clientWidth,clientHeight对应的是盒模型除去边框后的那部分区域的宽度和高度,不包含滚动条的宽度
    var boxE=document.getElementById("box");
    var box=document.getElementById("box2");
    //对于scrollWidth没有发生横向的溢出,同时由于overflow: scroll的原因,scrollWidth 跟clientWidth相同,但是没有包含滚动条的宽度
    console.log('scrollWidth:' + boxE.scrollWidth);//423
    console.log('scrollHeight:' + boxE.scrollHeight);//672

    //clientWidth与clientHeight分别等于offsetWidth与offsetHeight减掉相应边框(上下共20px,左右共20px)和滚动条宽度后的值(chrome下滚动条宽度为17px);
    console.log('clientWidth:' + boxE.clientWidth);//423=460-20-17
    console.log('clientHeight:' + boxE.clientHeight);//323=360-20-17

    //offsetWidth与offsetHeight与chrome审查元素看到的尺寸完全一致
    console.log('offsetWidth :' + boxE.offsetWidth);//460=width+padding+border
    console.log('offsetHeight:' + boxE.offsetHeight);//360=height+padding+border
  </script>
  </body>
</html>

利用JS获取DOM元素的大小

获取html根元素:document.documentElement
获取body元素:document.body

获取页面可视区的宽度和高度,不包括滚动条
IE、FF、chrome中采用:
使用document.documentElement.clientWidth和document.documentElement.clientHeight
注意:ie6标准模式下,上述方式可以

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

Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>页面视口宽高</title>
</head>
<body>
  <script type="text/javascript">
  //标准模式
  var w=document.documentElement.clientWidth;
  var h=document.documentElement.clientHeight;
  console.log('w宽:'+w+'---'+'h高:'+h);
  //混杂模式
  var width=document.body.clientWidth;
  var height=document.body.clientHeight;
  //兼容写法
  var ww=document.documentElement.clientWidth||document.body.clientWidth;
  var hh=document.documentElement.clientHeight||document.body.clientHeight;
  console.log('ww宽:'+ww+'---'+'hh高:'+hh);
  </script>
</body>
</html>

获取一个普通html元素的大小

docE.offsetWidth;
docE.offsetHeight;

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

var oTop=document.documentElement.scrollTop||document.body.scrollTop;

offsetWidth与offsetHeight

这两个属性表示元素的可视区的宽度和高度,这个值包括元素的边框(border),水平padding,垂直滚动条宽度或者高度,元素本身宽度或者高度等。

offsetWidth与offsetHeight这两个属性的值只与该元素有关,与周围元素(父级和子级元素无关)。
offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)

offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)

offsetLeft与offsetTop

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

offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(即body元素)的引用。

两条规则:

如果当前元素的父级元素没有进行CSS定位(position为absolute或relative),offsetParent为body。

如果当前元素的父级元素中有CSS定位(position为absolute或relative),offsetParent取最近的那个父级元素。

offsetLeft:对象元素边界的左上角顶点相对于offsetParent的左上角顶点的水平偏移量;

offsetTop:对象元素边界的左上角顶点相对于offsetParent的左上角顶点的垂直偏移量;

offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)

offsetTop=(offsetParent的padding-top)+(中间元素的offsetHeight)+(当前元素的margin-top)

当offsetParent为body时情况比较特殊:

在IE8/9/10及Chrome中:
offsetLeft = (body的margin-left)+(body的border-width)+(body的padding-left)+(当前元素的margin-left)。

在FireFox中:
offsetLeft = (body的margin-left)+(body的padding-left)+(当前元素的margin-left)

以上就是小编为大家带来的JS中位置与大小的获取方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
c#程序员对TypeScript的认识过程
Jun 19 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 Javascript
vue组件间的参数传递实例详解
Apr 26 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 Javascript
javascript中Date对象的使用总结
Nov 21 #Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 #Javascript
使用Angular.js实现简单的购物车功能
Nov 21 #Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 #Javascript
JS实现图片上传预览功能
Nov 21 #Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 #Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 #Javascript
You might like
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python根据经纬度计算距离示例
2014/02/16 Python
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
Python实现方便使用的级联进度信息实例
2015/05/05 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
python检索特定内容的文本文件实例
2018/06/05 Python
python实现按行分割文件
2019/07/22 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
应届生程序员求职信
2013/11/05 职场文书
新闻专业个人求职信
2013/12/19 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
项目安全员岗位职责
2015/02/15 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers
golang json数组拼接的实例
2021/04/28 Golang
如何Tomcat中使用ipv6地址
2022/05/06 Servers
nginx设置资源请求目录的方式详解
2022/05/30 Servers