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 相关文章推荐
将Datatable转化成json发送前台实现思路
Sep 06 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
js日期联动示例
May 02 Javascript
教你用jquery实现iframe自适应高度
Jun 11 Javascript
如何使用angularJs
May 08 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 Javascript
微信小程序合法域名配置方法
May 06 Javascript
react 组件传值的三种方法
Jun 03 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 Javascript
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
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学习之PHP运算符
2006/10/09 PHP
PHP如何将XML转成数组
2016/04/04 PHP
Javascript实现的分页函数
2006/12/22 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
vue-test-utils初使用详解
2019/05/23 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
公证委托书大全
2014/04/04 职场文书
保护环境倡议书500字
2014/05/19 职场文书
捐款通知怎么写
2015/04/24 职场文书
MySQL 5.7常见数据类型
2021/07/15 MySQL