• HTML:scrollLeft,scrollWidth,clientWidth,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均无关)

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

    200610291284684118.jpg (51.96 KB)

    200610291284684118.jpg
    参见：http://bbs.chinaunix.net/viewthread.php?tid=883723###
  • 相关阅读:
    今日头条 算法 架构
    什么才是真正的成长
    罗素 哲学 数学
    商业模式 广告 DSP
    人工智能 商业 落地 榜单
    【转】没有过时的CRM 图解大全
    20个人的初创公司，采用哪些技术栈和软件便于快速研发？
    【转】DevSecOps：打造安全合规的 DevOps 平台
    spring security HttpSessionEventPublisher & spring session HttpSessionListener
    JEECG codegenerate-3.6.3 maven
  • 原文地址：https://www.cnblogs.com/zcy_soft/p/1956184.html
Copyright © 2020-2023  润新知