zoukankan      html  css  js  c++  java
  • [转贴]Js中 关于top、clientTop、scrollTop、offsetTop等

    http://topic.csdn.net/u/20081205/16/33adbe19-ee41-4edb-adad-e1e595861ae5.html

    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


    <script type="text/javascript">
    <!-- var winWidth = 0; 
    var winHeight = 0; 
    function findDimensions() //函数:获取尺寸 
    {  //获取窗口宽度 
    if (window.innerWidth) 
    winWidth = window.innerWidth; 
    else if ((document.body) && (document.body.clientWidth)) 
    winWidth = document.body.clientWidth;  //获取窗口高度 
    if (window.innerHeight) 
    winHeight = window.innerHeight; 
    else if ((document.body) && (document.body.clientHeight)) 
    winHeight = document.body.clientHeight;  //通过深入Document内部对body进行检测,获取窗口大小 
    if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth) 

    winHeight = document.documentElement.clientHeight; 
    winWidth = document.documentElement.clientWidth; 
    }  //结果输出至两个文本框 
    document.form1.availHeight.value= winHeight; 
    document.form1.availWidth.value= winWidth; 
    }  findDimensions();  //调用函数,获取数值 
    window.onresize=findDimensions;
    //--> </script>








    网页可见区域宽: document.body.clientWidth;
    网页可见区域高: document.body.clientHeight;
    网页可见区域宽: document.body.offsetWidth   (包括边线的宽);
    网页可见区域高: document.body.offsetHeight  (包括边线的宽);
    网页正文全文宽: document.body.scrollWidth;
    网页正文全文高: document.body.scrollHeight;
    网页被卷去的高: document.body.scrollTop;
    网页被卷去的左: document.body.scrollLeft;
    网页正文部分上: window.screenTop;
    网页正文部分左: window.screenLeft;
    屏幕分辨率的高: window.screen.height;
    屏幕分辨率的宽: window.screen.width;
    屏幕可用工作区高度: window.screen.availHeight;
    屏幕可用工作区宽度:window.screen.availWidth;

  • 相关阅读:
    iOS 多线程/GCD
    iOS推送通知的实现步骤
    Swift中文教程-学习
    设计模式——观察者模式
    SSM学习
    Servlet 学习
    java基础
    DOM中节点
    会议管理系统设计
    springboot与thymeleaf 整合
  • 原文地址:https://www.cnblogs.com/zfq308/p/1349534.html
Copyright © 2011-2022 走看看