JS中位置与大小的获取方法
scrollHeight,clientHeight,offsetHeight的区别
说明：
scrollHeight：DOM元素的实际内容的高度，不包border的高度，会随DOM元素中内容的增加(超过可视区后)而变大。
clientHeight：DOM元素内容可视区的高度，不包含滚动条和边框的高度。
offsetHeight：DOM元素整体的高度，包括滚动条和边框。
当滚动条不出现的时候
这时候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中位置与大小的获取方法全部内容了，希望大家多多支持脚本之家~
相关文章
前面文章里写过一个弹出层对话框，但ie6下有bug，根本没有实现position:fixed的效果，当时没有真实ie6环境，测试疏忽，匆匆放到博客上，还让一些读者看到甚至使用，在这里表示万分抱歉啊2011-05-05
这篇文章介绍了javascript静态页面传值的三种方法及优缺点，有需要的朋友可以参考一下2013-11-11
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下2016-04-04
这篇文章主要介绍了微信内置浏览器图片查看器的代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
本文给大家分享的常用脚本有通过数组，拓展字符串拼接容易导致性能的问题、页面 视口 滚动条的位置的辅助函数、调节元素透明度的函数、获取鼠标位置的几个通用的函数、使用cssdisplay属性来切换元素可见性的一组函数、样式相关的通用函数、获取元素当前的高度和宽度。2015-03-03
这篇文章主要介绍了JavaScript 生成唯一ID的几种方式，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2021-02-02
这篇文章主要介绍了javascript基于DOM实现权限选择的方法,实例分析了javascript针对页面元素的动态选择与添加删除等操作的相关技巧,非常具有实用价值,需要的朋友可以参考下2015-05-05
通过js获取select(多选下拉)中所选值，具体实现如下，有需要的朋友可以参考下，希望对大家有所帮助2013-08-08
本文通过实例代码给大家介绍了js实现弹出框的拖拽效果，代码简单易懂，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了JavaScript通过字符串调用函数的实现方法,实例分析了javascript动态调用函数的技巧,需要的朋友可以参考下2015-03-03
最新评论