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. Call to undefined method app\models\User::find() yii2-admin
			
    这个问题可能大家遇到的不多. 分析原因 问题出在 config/web.php 这个配置文件里面 'components' => [ ..... 'user' => [ 'identity ...
    
			
    2. 
						
  2. redis4支持内存碎片清理功能使用
			
    最近看到redis4支持内存碎片清理了, 之前一直期待有这么一个功能, 因为之前遇到内存碎片的解决办法就是重启, 现在终于有了优雅的解决方案.\^o^/, 这个功能其实oranagra 在2017年1 ...
    
			
    3. 
						
  3. pycharm运行测试用例遇到错误：ZeroDivisionError: float division by zero的原因
			
    运行测试用例报错:ZeroDivisionError: float division by zero 一般是因为测试用例模块命名没有以test开头,导致unittest找不到用例,用例总数为0,导致除 ...
    
			
    4. 
						
  4. 安装iamp模块,编译报错configure: error: Cannot find imap library (libc-client.a). Please check your c-client installation.
			
    yum install libc-client-devel cd /root/lnmp1.0-full/php-5.3.17/ext/imap /usr/local/php/bin/phpize ./ ...
    
			
    5. 
						
  5. Spoj375 Qtree--树链剖分
			
    Spoj375 Qtree给一棵共有 n(n · 10000) 个结点的树, 每条边都有一个权值, 要求维护一个数据结构, 支持如下操作: 1. 修改某条边的权值; 2. 询问某两个结点之间的唯一通路 ...
    
			
    6. 
						
  6. 基于 Timer是一种定时器工具
			
    没有依赖 通过Timer中的schedule方法启动定时任务 一般不采用此方法 /** * ------------------------------------------------------ ...
    
			
    7. 
						
  7. [Web 前端] 032 vue 初识
			
    目录 0. 先下载 1. 先写个轮廓 2. 牛刀小试 2.1 例子 1 2.2 例子 2 3. 模板语法 上例子 4. 文本指令 上例子 5. 属性操作 上例子 6. 样式操作 上例子 类名的操作 s ...
    
			
    8. 
						
  8. [19/09/08-星期日] Python的几个概念和语法
			
    一.表达式.语句.程序.函数 1.表达式 就是一个类似于数学公式的东西 ,比如:10 + 5 8 - 4:表达式一般仅仅用了计算一些结果,不会对程序产生实质性的影响 如果在交互模式中输入一个表达式,解 ...
    
			
    9. 
						
  9. spring boot @Transactional的一个小坑
			
    同一个类Service下,有两个函数 method_1和 method_2,且method_1内部调用了method_2,那么希望method_2内部意外时,数据库回滚,那么一定要在method_1上 ...
    
			
    10. 
						
  10. linux 获取目录中详细信息 -rw-r--r--详解
			
    -rw-r–r– 1 root root 1313 Sep 3 14:59 test.log详解 查询目录中的内容命令 ls [选项] [文件或目录] 选项: -a 显示所有文件.包括隐藏文件 -l  ...
    
			
    11.