• 【转】关于top、clientTop、scrollTop、offsetTop等


    1
    2
    3
    4
    clientWidth = width - border
    clientHeight = height - border
    offsetWidth = width
    offsetHeight = height

    IE,FireFox 差异如下: 

    IE6.0、FF1.06+:

    1
    2
    3
    4
    clientWidth = width + padding
    clientHeight = height + padding
    offsetWidth = width + padding + border
    offsetHeight = height + padding + border


    IE5.0/5.5:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    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;


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

  • 相关阅读:
    CentOS7使用firewalld打开关闭防火墙与端口
    SELinux: Could not downgrade policy file
    CentOS 安装 semanage 命令
    漏洞: RHSA2017:3075: wget security update
    CentOS7增加或修改SSH端口号
    gnl's not lao 道德经 英文版
    当代 IT 大牛排行榜
    当代 IT 大牛排行榜
    2008 年个人回忆与总结
    Patch2 for NetBeans IDE 6.5 Now Available
  • 原文地址:https://www.cnblogs.com/mumianhua1003/p/4617449.html
Copyright © 2020-2023  润新知