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 相关文章推荐
javascript之ESC(第二类混淆)
May 06 Javascript
JavaScript 直接操作本地文件的实现代码
Dec 01 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 Javascript
详解js中==与===的区别
Jan 08 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
vue实现移动端悬浮窗效果
Dec 01 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 Javascript
vue实现移动端返回顶部
Oct 12 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
php数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
PYTHON 中使用 GLOBAL引发的一系列问题
2016/10/12 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
python实现简单登陆流程的方法
2018/04/22 Python
python requests 测试代理ip是否生效
2018/07/25 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
详解python持久化文件读写
2019/04/06 Python
详解python中的数据类型和控制流
2019/08/08 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
HTML文本属性&amp;颜色控制属性的实现
2019/12/17 HTML / CSS
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
工程业务员工作职责
2013/12/07 职场文书
初二政治教学反思
2014/01/12 职场文书
演讲比赛策划方案
2014/06/11 职场文书
学术研讨会主持词
2015/07/04 职场文书
自信主题班会
2015/08/14 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书