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

JS获取元素尺寸大小、鼠标位置的更多相关文章

  1. 【全面总结】js获取元素位置大小

    [js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...

  2. JavaScript获取元素尺寸和大小操作总结

    一.获取元素的行内样式 复制代码 代码如下: var obj = document.getElementById("test"); alert(obj.height + " ...

  3. (转)JS获取当前对象大小以及屏幕分辨率等

    原文 JS获取当前对象大小以及屏幕分辨率等   <script type="text/javascript">function getInfo(){       var ...

  4. JS获取当前对象大小以及屏幕分辨率等...

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta nam ...

  5. 【Javascript Demo】JS获取当前对象大小以及屏幕分辨率等

    效果如下: 代码如下: <html> <head> <title>获取当前对象大小以及屏幕分辨率等</title> <body> <d ...

  6. js获取编辑框游标的位置

    代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  7. DOM元素的大小和位置

    HTML: <div id="parent"> <div id="box"> 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测 ...

  8. JS获取元素CSS值的各种方法分析

    先来看一个实例:如何获取一个没有设置大小的字体? <!DOCTYPE html> <html lang="en"> <head> <met ...

  9. js获取元素transform参数得出的个人理解

    之前写页面的时候有试过想用js获取某些元素的translate的数值什么的,但是translate又是transform的子样式(勉强说说),理所当然就是先获取transform样式,再读里面的值. ...

随机推荐

  1. ABP 初探 之 多语言

    最近几天空闲时间比较多,就研究Abp的多语言,Abp是基于接口的依赖注入,有很多思想与方法都很好,需自己深入体会与应用,转化成自己的思想应用于实践. 本篇介绍基于 开源Demo ModuleZeroS ...

  2. 用Curl测试POST

    POST请求 http://172.16.102.208:8089/wiapi/score?leaderboard_id=1&score=36&app_key=66 目的1:通过脚本发 ...

  3. WAMP中phpMyAdmin登陆不了问题的解决方法

    WAMP中phpMyAdmin登陆不了问题的解决方法

  4. Android Service 与 IntentService

    Service 中的耗时操作必须 在 Thread中进行: IntentService 则直接在 onHandleIntent()方法中进行

  5. JavaScript实现省市级联效果实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. PowerDesigner 16.5对SQL Server 2012 生成数据库时&quot;不支持扩展属性&quot;问题

    团队合作设计一套系统数据模型,创建了PDM后,Table.View.Store Procedure等都创建好了,且创建了多个Schema方便管理这些数据库对象,但Table.view.Column等对 ...

  7. Linux系统查看系统是32位还是64位方法总结【转】

    转自:http://www.cnblogs.com/kerrycode/p/3785768.html 这篇博客是总结.归纳查看Linux系统是32位还是64位的一些方法,很多内容来自网上网友的博客.本 ...

  8. 12.Warning (15714): Some pins have incomplete I/O assignments. Refer to the I/O Assignment Warnings report for details

    解释:对于一些管脚,缺少了部分描述,需要再添加一些设置,比如current strength,slew rate等: 措施:打开pin plannel界面,在current strength和slew ...

  9. iOS之隐藏状态栏

    iOS7中,不仅应用的风格有一定的变化,状态栏变化比较大,我们可以看到UIViewController的状态栏与导航栏基本是一体的.因此UIVIEWCONTROLLER的hide/show状态的方法也 ...

  10. 关于C#动态调用VC Dll的方法(转)

    http://blog.csdn.net/null1/article/details/3953155