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. vs2010发布网站时有些文件没有发布出去的解决办法。
			
    项目中包含了一些ttf字体文件做为图标使用,可是发布时发现生成的目录中没有这个文件,这种情况这么设置一下就可以解决: 1,在文件上点击右键,选择“属性”. 2,在弹出的属性窗口中,更改“生成操作”为“ ...
    
			
    2. 
						
  2. MyEclipse中的查找快捷键
			
    MyEclipse中的查找快捷键 1.Ctrl+H:可以搜索文件,Java类名.方法名.包名等等. 例如:在MyEclipse中打开Search弹出框,或者在菜单中打开Search弹出框, 定位到 F ...
    
			
    3. 
						
  3. redis 锦集
			
    redis 锦集url:http://blog.csdn.net/lqadam/article/category/7479450 1. redis 排序 2.redis 慢查询.位数组和事务 3.re ...
    
			
    4. 
						
  4. springBoot（1） 环境安装
			
    真鸡儿要命.今天做开发.实在是整不动了...所以决定回家,干一波... 发现MyEclipse2014好像真的不用能用了... 瞬间焦头烂额,本来,就跑不了.现在环境也没一个能用的. 于是 就有了今天 ...
    
			
    5. 
						
  5. Go语言入门篇-复合数据类型
			
    复合数据类型 主要讨论四种类型——数组.slice.map和结构体 数组和结构体聚合类型   --数组和结构体都是有固定内存大小的数据结构 --数组:由同构的元素组成——每个数组元素都是完全相同的类型 ...
    
			
    6. 
						
  6. react-native的技巧
			
    按钮定制 給图片添加点击事件 <TouchableOpacity onPress={this.lookAlbum} style={{flex: 0, height: 40, width: 40, ...
    
			
    7. 
						
  7. linux文件属性软链接
			
    linux里的软链接 相当于windows系统中的快捷方式 软链接总结: 1.删除源文件,软链接文件依然存在,但是无法访问指向源文件路径内容. 2.失效时候一般是白字红底闪烁显示. test -> ...
    
			
    8. 
						
  8. Docker中的Dockerfile命令详解FROM　RUN　COPY　ADD　ENTRYPOINT...
			
    Dockerfile指令 这些建议旨在帮助您创建高效且可维护的Dockerfile. FROM FROM指令的Dockerfile引用 尽可能使用当前的官方图像作为图像的基础.我们推荐Alpine图像 ...
    
			
    9. 
						
  9. [BZOJ 3625] [Codeforces 438E] 小朋友的二叉树 (DP+生成函数+多项式开根+多项式求逆)
			
    [BZOJ 3625] [Codeforces 438E] 小朋友的二叉树 (DP+生成函数+多项式开根+多项式求逆) 题面 一棵二叉树的所有点的点权都是给定的集合中的一个数. 让你求出1到m中所有权 ...
    
			
    10. 
						
  10. RouteReuseStrategy angular路由复用策略详解,深度刨析路由复用策略
			
    关于前端路由复用策略网上的文章很多,大多是讲如何实现tab标签切换历史数据,至于如何复用的原理讲的都比较朦胧,代码样例也很难适用各种各样的路由配置,比如懒加载模式下多级嵌套路由出口网上的大部分代码都会 ...
    
			
    11.