zoukankan      html  css  js  c++  java

  • scrolllef scrollwidth clientwidth offsetwidth offsetwidth

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解

    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均无关)

    　　测试代码：

    Html代码 复制代码
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4.   
    5.   
    6. <head>  
    7. <title>代码实例：关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较</title>  
    8. <meta http-equiv="content-type" content="text/html; charset=gb2312" />  
    9. <meta name="author" content="枫岩,CnLei.y.l@gmail.com">  
    10. <meta name="copyright"  
    11.     content="http://www.cnlei.com]http://www.cnlei.com" />  
    12. <meta name="description"  
    13.     content="关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较" />  
    14. <style type="text/css" media="all">  
    15. body {   
    16.     font-size: 14px;   
    17. }   
    18. a,a:visited {   
    19.     color: #00f;   
    20. }   
    21. #Div_CnLei {   
    22.      300px;   
    23.     height: 200px;   
    24.     padding: 10px;   
    25.     border: 10px solid #ccc;   
    26.     background: #eee;   
    27.     font-size: 12px;   
    28. }   
    29. #Div_CnLei p {   
    30.     margin: 0;   
    31.     padding: 10px;   
    32.     background: #fff;   
    33. }   
    34. </style>  
    35. <script type="text/javascript">    
    36. function Obj(s){   
    37. return document.getElementById(s)?document.getElementById(s):s;   
    38. }   
    39. function GetClientWidth(o){   
    40. return Obj(o).clientWidth;   
    41. }   
    42. function GetClientHeight(o){   
    43. return Obj(o).clientHeight;   
    44. }   
    45. function GetOffsetWidth(o){   
    46. return Obj(o).offsetWidth;   
    47. }   
    48. function GetOffsetHeight(o){   
    49. return Obj(o).offsetHeight;   
    50. }   
    51. </script>  
    52. </head>  
    53. <body>  
    54. <p>点击下面的链接:</p>  
    55. <div id="Div_CnLei">  
    56. <p><a href="javascript:alert(GetClientWidth('Div_CnLei'));">GetClientWidth();</a>  
    57. <a href="javascript:alert(GetClientHeight('Div_CnLei'));">GetClientHeight();</a></p>  
    58. <p><a href="javascript:alert(GetOffsetWidth('Div_CnLei'));">GetOffsetWidth();</a>  
    59. <a href="javascript:alert(GetOffsetHeight('Div_CnLei'));">GetOffsetHeight();</a></p>  
    60. </div>  
    61. <div id="Description">  
    62. <p><strong>IE6.0、FF1.06+：</strong><br />  
    63. clientWidth = width + padding = 300+10×2 = 320<br />  
    64. clientHeight = height + padding = 200+10×2 = 220<br />  
    65. offsetWidth = width + padding + border = 300+10×2+10×2= 340<br />  
    66. offsetHeight = height + padding + border = 200+10×2+10×2 = 240</p>  
    67. <p><strong>IE5.0/5.5：</strong><br />  
    68. clientWidth = width - border = 300-10×2 = 280<br />  
    69. clientHeight = height - border = 200-10×2 = 180<br />  
    70. offsetWidth = width = 300<br />  
    71. offsetHeight = height = 200</p>  
    72. </div>  
    73. </body>  
    74. </html>  


    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均无关)

  • 相关阅读:
    idea websitehttp://www.youyur.com/
    chromium project相关页面
    WebKit Remote Debugging
    天兰尾货
    GitCookbook from google chromium
    ocr识别
    Google发布Chrome官方扩展DOM Snitch 可发现网页代码漏洞
    WebKit2 High Level Document ¶
    Phantom JS: an alternative to Selenium
    Python Extension
  • 原文地址：https://www.cnblogs.com/zhanghaichang/p/1967301.html
Copyright © 2011-2022 走看看