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 replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
jQuery获取和设置表单元素的方法
Feb 14 Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
js中new一个对象的过程
Feb 20 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 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之PHP语法学习笔记1
2006/12/17 PHP
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
28个JS验证函数收集
2010/03/02 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
入党思想汇报
2014/01/05 职场文书
面试后感谢信
2014/02/01 职场文书
共产党员承诺书
2014/03/25 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
四年级小学生评语
2014/12/26 职场文书
小时代观后感
2015/06/10 职场文书
如何写新闻稿
2015/07/18 职场文书
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers