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. 算法初级（scala）
			
    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/two-sum 1.给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为 ...
    
			
    2. 
						
  2. LeetCode算法题-Shortest Distance to a Character（Java实现）
			
    这是悦乐书的第321次更新,第343篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第191题(顺位题号是821).给定字符串S和字符C,返回一个整数数组,表示字符串中所有 ...
    
			
    3. 
						
  3. Java多线程学习——图片下载
			
    实现多线程方式1:继承类Thread——重写方法run——调用方法start 从网络下载图片首先要增加包commons-io.jar import org.apache.commons.io.File ...
    
			
    4. 
						
  4. sql server监控工具
			
    图形化监控工具 [1]toad toad官网介绍:https://www.quest.com/cn-zh/products/toad-for-sql-server/ 破解版网上搜索下载使用:https ...
    
			
    5. 
						
  5. 极*Java速成教程 - (4)
			
    Java语言基础 多态 多态是面向对象的一大重要特性,如果说封装是隐藏一个类怎么做,继承是确定一系列的类做什么,那多态就是通过手段去分离做什么和怎么做. 向上转型与收窄 在开发者将一类事物封装成类以后 ...
    
			
    6. 
						
  6. uboot 主Makefile分析
			
    一. Makefile 配置 1.1. make xxx_config 1.1.1. 笔者实验时是make x210_sd_config a. x210_sd_config是Makefile下的一个目 ...
    
			
    7. 
						
  7. 2019 Multi-University Training Contest 2 - 1011 - Keen On Everything But Triangle - 线段树
			
    http://acm.hdu.edu.cn/showproblem.php?pid=6601 首先要贪心地想,题目要最长的边长,那么要怎么构造呢?在一段连续的区间里面,一定是拿出最长的三根出来比,这样 ...
    
			
    8. 
						
  8. Laravel 学习笔记之文件上传
			
    自定义添加磁盘——upload 位置:config/filesystems.php 'disks' => [ 'local' => [ 'driver' => 'local', 'r ...
    
			
    9. 
						
  9. 【学习总结】快速上手Linux玩转典型应用-第5章-远程连接SSH专题
			
    课程目录链接 快速上手Linux玩转典型应用-目录 目录 1. 认识SSH 2. 服务器安装SSH服务 3. 客户端安装SSH工具 4. 客户端链接SSH服务 5. SSH config 6. SSH ...
    
			
    10. 
						
  10. 【学习总结】快速上手Linux玩转典型应用-第1章-课程介绍
			
    课程目录链接 快速上手Linux玩转典型应用-目录 1. Linux有什么用 2. 课程安排 3. 课程收获 基本运维能力,等等 END
    
			
    11.