• jq 获取各个元素的宽度高度的方法

    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获取各种宽度、高度的简单介绍

    

    

    

    [javascript] view plain copy

     
    

    

    

      

    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.   
      6. 

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

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

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

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

    10.    
      11. 

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

    12. $('#outer-div')[0].scrollHeight  
      13. 

    13. //获取div的实际高度  
      14. 

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

    



    

    判断滚动条滚动到底部：
    

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

    

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

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

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

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

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

    

    

    

    [html] view plain copy

     
    


    


    

      

    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.     
      12. 

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

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

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

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

    16.     
      17. 

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

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

    19.       });    
      20. 

    20.   });    
      21. 

    21.   </script>    
      22. 

    22. <body>    
      23. 

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

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

    25.     <span id="scroll-to-bottom-msg"></span>    
      26. 

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

    27.       <div style="height:750px;background:#aea;600px;margin:0 auto;">    
      28. 

    28.       </div>    
      29. 

    29.     </div>    
      30. 

    30. </body>    
      31. 

    31. </html>    
      32. 


    

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

    

    

    

    [html] view plain copy

     
    


    


    

      

    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.     
      12. 

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

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

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

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

    16.     
      17. 

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

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

    19.       });    
      20. 

    20.   });    
      21. 

    21.   </script>    
      22. 

    22. <body>    
      23. 

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

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

    25.     <span id="scroll-to-bottom-msg"></span>    
      26. 

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

    27.       <div style="height:750px;background:#aea;600px;margin:0 auto;">    
      28. 

    28.       </div>    
      29. 

    29.     </div>    
      30. 

    30. </body>    
      31. 

    31. </html>    
      32. 

    32. 


    


    

    
    
          
    • 

          
  • 

            相关阅读:
    
            
              Mybatis多表查询
                
    （转）Java安全通信：HTTPS与SSL
                
    （转）RSA加密解密及数字签名Java实现
                
    （转）大型企业电话会议视频会议备份解决方案
                
    （转）虚拟IP原理
                
    虚拟IP---Linux下一个网卡配置多个IP
                
    C++ 点
                
    算法(8)Maximum Product Subarray
                
    算法(7)Majority Element II
                
    算法(6)3Sum Closest
                
                    
          
    • 
          
  • 
            原文地址：https://www.cnblogs.com/ajaxlu/p/9026142.html
          
    • 

        

      



      
      

        

        

      

    

  


  

  
Copyright © 2020-2023 
  润新知