zoukankan      html  css  js  c++  java
  • JS一秒区分clientX,offsetX,screenX,pageX之间关系

    javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下

    event.clientX、event.clientY

    鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

    event.pageX、event.pageY

    类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。

    event.offsetX、event.offsetY

    鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。

    event.screenX、event.screenY

    鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

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

    <script language="javascript">
    function screenInfo(){
        var  s = "";
       s += " 网页可见区域宽:"+ document.body.clientWidth;
       s += " 网页可见区域高:"+ document.body.clientHeight;
       s += " 网页可见区域宽:"+ document.body.offsetWidth  +" (包括边线的宽)";
       s += " 网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";
       s += " 网页正文全文宽:"+ document.body.scrollWidth;
       s += " 网页正文全文高:"+ document.body.scrollHeight;
       s += " 网页被卷去的高:"+ document.body.scrollTop;
       s += " 网页被卷去的左:"+ document.body.scrollLeft;
       s += " 网页正文部分上:"+ window.screenTop;
       s += " 网页正文部分左:"+ window.screenLeft;
       s += " 屏幕分辨率的高:"+ window.screen.height;
       s += " 屏幕分辨率的宽:"+ window.screen.width;
       s += " 屏幕可用工作区高度:"+ window.screen.availHeight;
       s += " 屏幕可用工作区宽度:"+ window.screen.availWidth;
       alert(s);
    }
    </script>

  • 相关阅读:
    C# 操作XML文件
    参数化查询为什么能够防止SQL注入
    引用asp.net母版页后,母版页和内容页的页面事件执行顺序
    简单的数据库时间查询
    WCFService Configuration Editor的使用
    显示、隐藏计算机Administrator账户
    在ASP程序中调用Web Service
    ASP.NET WAP开发
    Microsoft SQL Server 2005 错误 29503。SQL Server 服务无法启动
    ASPNET2.0中读写Cookie的方法!
  • 原文地址:https://www.cnblogs.com/Abner5/p/5855274.html
Copyright © 2011-2022 走看看