JS获取各种宽度、高度的简单介绍：

scrollHeight: 获取对象的滚动高度。 
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
scrollWidth:获取对象的滚动宽度 
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
event.clientX 相对文档的水平座标 
event.clientY 相对文档的垂直座标 
event.offsetX 相对容器的水平坐标 
event.offsetY 相对容器的垂直坐标 
document.documentElement.scrollTop 垂直方向滚动的值 
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

以上主要指IE之中，FireFox差异如下：

IE6.0、FF1.06+：

clientWidth = width + padding 
clientHeight = height + padding 
offsetWidth = width + padding + border 
offsetHeight = height + padding + border

IE5.0/5.5：

clientWidth = width - border 
clientHeight = height - border 
offsetWidth = width 
offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

offsetWidth (width+padding+border)

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。

obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。

obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。获取对象可见内容的宽度，不包括滚动条，不包括边框；

obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。

offsetWidth 与 style.width 的区别

一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。

二、offsetTop 只读，而 style.top 可读写。

三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

jQuery获取各种宽度、高度的简单介绍





  1. alert($(window).height()); //浏览器时下窗口可视区域高度
    2. 

  2. alert($(document).height()); //浏览器时下窗口文档的高度
    3. 

  3. alert($(document.body).height());//浏览器时下窗口文档body的高度
    4. 

  4. alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin
    5. 

  5. alert($(window).width()); //浏览器时下窗口可视区域宽度
    6. 

  6. alert($(document).width());//浏览器时下窗口文档对于象宽度
    7. 

  7. alert($(document.body).width());//浏览器时下窗口文档body的高度
    8. 

  8. alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin
    9. 

  9. alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度
    10. 

  10. $('#outer-div')[0].scrollHeight
    11. 

  11. //获取div的实际高度
    12. 

  12. alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度






判断滚动条滚动到底部：


js判断:判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。




scrollTop为滚动条在Y轴上的滚动距离。


clientHeight为内容可视区域的高度。


scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。


从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。


jquery实现判断滚动条滚动到底部：






  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. 

  3. <head>
    4. 

  4. <meta http-equiv="content-type" content="text/html;charset=utf-8">
    5. 

  5. <title>下拉滚动条滚到底部了吗？</title>
    6. 

  6. <script language="javascript" src="jQuery.js"></script>
    7. 

  7. <script language="javascript">
    8. 

  8. $(document).ready(function (){
    9. 

  9. $('#scroll-top-msg').html($("#outer-div")[0].scrollTop);
    10. 

  10. $('#scroll-height-msg').html($("#outer-div")[0].scrollHeight);
    11. 

  11. $("#outer-div").scroll(function(){
    12. 

  12. $('#scroll-to-bottom-msg').html('');
    13. 

  13. $('#scroll-top-msg').html($("#outer-div")[0].scrollTop);
    14. 

  14. $('#scroll-height-msg').html($("#outer-div")[0].scrollHeight);
    15. 

  15. if($("#outer-div")[0].scrollTop >= ($("#outer-div")[0].scrollHeight - $("#outer-div").height()))
    16. 

  16. $('#scroll-to-bottom-msg').html('滚动到DIV底部了');
    17. 

  17. });
    18. 

  18. });
    19. 

  19. </script>
    20. 

  20. <body>
    21. 

  21. Scroll Top : <span id="scroll-top-msg">0</span> |
    22. 

  22. Scroll Height : <span id="scroll-height-msg">0</span> <br/>
    23. 

  23. <span id="scroll-to-bottom-msg"></span>
    24. 

  24. <div id="outer-div" style="overflow-y:auto; overflow-x:hidden; width:800px;height:500px;background:gray;">
    25. 

  25. <div style="height:750px;background:#aea;width:600px;margin:0 auto;">
    26. 

  26. </div>
    27. 

  27. </div>
    28. 

  28. </body>
    29. 

  29. </html>




当然也可以使用百分比判断滚动条离底部距离






  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. 

  3. <head>
    4. 

  4. <meta http-equiv="content-type" content="text/html;charset=utf-8">
    5. 

  5. <title>下拉滚动条滚到底部了吗？</title>
    6. 

  6. <script language="javascript" src="jQuery.js"></script>
    7. 

  7. <script language="javascript">
    8. 

  8. $(document).ready(function (){
    9. 

  9. $('#scroll-top-msg').html($("#outer-div")[0].scrollTop);
    10. 

  10. $('#scroll-height-msg').html($("#outer-div")[0].scrollHeight);
    11. 

  11. $("#outer-div").scroll(function(){
    12. 

  12. $('#scroll-to-bottom-msg').html('');
    13. 

  13. $('#scroll-top-msg').html($("#outer-div")[0].scrollTop);
    14. 

  14. $('#scroll-height-msg').html($("#outer-div")[0].scrollHeight);
    15. 

  15. if($("#outer-div")[0].scrollTop / （($("#outer-div")[0].scrollHeight - $("#outer-div").height())）== 0.95 )   //在滚动条距离底端5%以内
    16. 

  16. $('#scroll-to-bottom-msg').html('滚动到DIV底部了');
    17. 

  17. });
    18. 

  18. });
    19. 

  19. </script>
    20. 

  20. <body>
    21. 

  21. Scroll Top : <span id="scroll-top-msg">0</span> |
    22. 

  22. Scroll Height : <span id="scroll-height-msg">0</span> <br/>
    23. 

  23. <span id="scroll-to-bottom-msg"></span>
    24. 

  24. <div id="outer-div" style="overflow-y:auto; overflow-x:hidden; width:800px;height:500px;background:gray;">
    25. 

  25. <div style="height:750px;background:#aea;width:600px;margin:0 auto;">
    26. 

  26. </div>
    27. 

  27. </div>
    28. 

  28. </body>
    29. 

  29. </html>




												


											
jq 获取各个元素的宽度高度的方法的更多相关文章
	

    
								
  1. Knockout获取数组元素索引的2种方法,在MVC中实现
		
    原文:Knockout获取数组元素索引的2种方法,在MVC中实现 在遍历数组.集合的时候,通常要获取元素的索引,本篇体验使用Knockout获取索引的2种方法. 假设有这样的一个模型: namespa ...
    
		
    2. 
						
  2. Jq_Js_Js、Jq获取浏览器和屏幕各种高度宽度
		
    $(document).ready(function()         {alert($(window).height()); //浏览器当前窗口可视区域高度alert($(document).he ...
    
		
    3. 
						
  3. jquery outerHeight方法 outerWidth方法  获取元素实际宽度高度
		
    曾经写代码中,每当须要获取元素的实际"宽度"(这里的宽度是指元素宽度加上其边距)时,都须要用元素宽度加上margin值才行,今天发现一个叫outerWidth(options)的方 ...
    
		
    4. 
						
  4. 获取dom元素的宽度和高度
		
    一.获取css的大小 1.第一种通过内联样式 var box = document.getElementById('box'); var w = box.style.width; var h = bo ...
    
		
    5. 
						
  5. JS与JQ 获取页面元素值的方法和差异对比
		
    获取浏览器高度和宽度 document.documentElement.clientWidth ==> 浏览器可见区域宽度 document.documentElement.clientHeig ...
    
		
    6. 
						
  6. 使用jquery获取父元素或父节点的方法
		
    今天面试题问到了,没答上,jq要继续学习啊 jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个 ...
    
		
    7. 
						
  7. jquery获取父元素或父节点的方法
		
    jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个例子: <ul class=" ...
    
		
    8. 
						
  8. js jq 获取网页元素宽度
		
    Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...
    
		
    9. 
						
  9. JS 和 Jq 获取客户端各种屏幕宽度和高度
		
    //javascript 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: documen ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. OPEN SQL:插入、删除、修改语法
			
    1. UPDATE 用于实现对数据据的更新操作,语法如下: UPDATE <dbtab> set f1...fn (where <condition>). UPDATE < ...
    
			
    2. 
						
  2. 小姐姐带你一起学：如何用Python实现7种机器学习算法（附代码）
			
    小姐姐带你一起学:如何用Python实现7种机器学习算法(附代码) Python 被称为是最接近 AI 的语言.最近一位名叫Anna-Lena Popkes的小姐姐在GitHub上分享了自己如何使用P ...
    
			
    3. 
						
  3. 第八周zuoye
			
    这个作业属于那个课程 C语言程序设计II 这个作业要求在哪 https://edu.cnblogs.com/campus/zswxy/computer-scienceclass3-2018/homew ...
    
			
    4. 
						
  4. Bean的构造器注入和setter注入
			
    链接:https://pan.baidu.com/s/1vixLrr8harzZMwLsIB1Mwg 提取码:ou1n 首先要明白,为什么要注入? IOC容器会在初始化时,创建好所有的bean对象的实 ...
    
			
    5. 
						
  5. 2019 计蒜之道 初赛 第一场 商汤的AI伴游小精灵
			
    https://nanti.jisuanke.com/t/39260 根据题意我们可以知道  这是一个树 我们只需要找到出度最大的两个点就好了 如果包含根节点的话要-- 两个点相邻的话也要-- 数据很 ...
    
			
    6. 
						
  6. SQLSERVER 备份恢复之后提示缺少创建表权限的问题解决
			
    1. 同事这边出现异常: 执行功能是报错, 这个错误 应该是创建临时表时没有权限触发的. 方法应该很简单 缺少权限增加权限即可 2. 这里需要使用sa 或者是 具有sa权限的用户登录 打开 数据库级别 ...
    
			
    7. 
						
  7. Android使用adb抓完整Log
			
    前言     最新项目里一直在做 Android RIL 方面的研究,非常最终项目还是未能解决通信底层模块的问题,但是在使用adb抓log上还是有一些收获的,这里记录一下.   Log分类     A ...
    
			
    8. 
						
  8. 搜索专题：HDU1241 Oil Deposits
			
    Oil Deposits Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tot ...
    
			
    9. 
						
  9. 01.AutoMapper 之约定(Conventions)
			
    转载(https://www.jianshu.com/p/d4c472d95da4)   约定(Conventions) 条件对象映射器 条件对象映射器根据源类型和目标类型之间的条件生成新类型映射.  ...
    
			
    10. 
						
  10. scala学习笔记(7)
			
    1.包 --------------------------------------- Scala中的包和Java或者C++中命名空间的目的是相同的:管理大型程序中的名称. package a{ pa ...
    
			
    11.