zoukankan      html  css  js  c++  java
  • JS获取元素尺寸大小、鼠标位置

    //e.clientX|Y:表示鼠标相对浏览器可视窗口的当前坐标
    //e.offsetX|Y:表示鼠标相对于事件源对象的坐标
    //e.pageX|Y:表示鼠标相对于网页的坐标
    /*
    element.offsetLeft|offsetTop:相对于拥有position:relative属性的水平方向|垂直方向的偏移量(坐标)
    可以对应css中的left或者top
    */

    //element.clientWidth|clientHeight:表示该对象的当前宽度|高度,注意不包含边框的宽度|高度
    //element.offsetWidth|offsetHeight:表示该对象的当前宽度|高度,注意包含边框的宽度|高度。
    //element.scrollLeft|scrollTop:表示该对象相对于滚动条而言网页滚动的距离。

    <html>
    <script>
    function a(){
    document.write(
    "屏幕分辨率为:"+screen.width+"*"+screen.height
    +"<br />"+
    "屏幕可用大小:"+screen.availWidth+"*"+screen.availHeight
    +"<br />"+
    "网页可见区域宽:"+document.body.clientWidth
    +"<br />"+
    "网页可见区域高:"+document.body.clientHeight
    +"<br />"+
    "网页可见区域宽(包括边线的宽):"+document.body.offsetWidth 
    +"<br />"+
    "网页可见区域高(包括边线的宽):"+document.body.offsetHeight 
    +"<br />"+
    "网页正文全文宽:"+document.body.scrollWidth
    +"<br />"+
    "网页正文全文高:"+document.body.scrollHeight
    +"<br />"+
    "网页被卷去的高:"+document.body.scrollTop
    +"<br />"+
    "网页被卷去的左:"+document.body.scrollLeft
    +"<br />"+
    "网页正文部分上:"+window.screenTop
    +"<br />"+
    "网页正文部分左:"+window.screenLeft
    +"<br />"+
    "屏幕分辨率的高:"+window.screen.height
    +"<br />"+
    "屏幕分辨率的宽:"+window.screen.width
    +"<br />"+
    "屏幕可用工作区高度:"+window.screen.availHeight
    +"<br />"+
    "屏幕可用工作区宽度:"+window.screen.availWidth
    );
    }
    </script>
    <body onload="a()" >
    </body>
    </html>
    View Code
  • 相关阅读:
    TCP/IP学习笔记:组播
    使用WITH AS 优化SQL
    帮盖尔优化SQL子查询优化的经典案例
    帮盖尔优化SQL
    子查询里面有树形查询,子查询选择使用in/exists需要特别留意
    [Linux] 服务器性能调优(CPU绑定)
    TCP/IP学习笔记:RIP
    TCP/IP学习笔记:路由与BGP
    利用Merge代替复杂的UPDATE语句
    android开机启动流程说明
  • 原文地址:https://www.cnblogs.com/RuMengkai/p/6233592.html
Copyright © 2011-2022 走看看