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



    网页可见区域宽: 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;

    //**************************************************************************
    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>

  • 相关阅读:
    Sentry异常捕获平台
    docker部署RabbitMQ(单机)
    Elasticsearch参数调优
    docker 部署Elasticsearch-权限认证(单节点)
    ElementUI 实现el-table 列宽自适应
    vue 弹幕插件
    linux 命令笔记
    swoole安装笔记
    Swoole学习笔记
    VM安装centos8实战
  • 原文地址:https://www.cnblogs.com/Fooo/p/1545596.html
Copyright © 2011-2022 走看看