//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. 【JQ基础】数组

    each() 方法规定为每个匹配元素规定运行的函数.

  2. 计算机程序的思维逻辑 (43) - 剖析TreeMap

    40节介绍了HashMap,我们提到,HashMap有一个重要局限,键值对之间没有特定的顺序,我们还提到,Map接口有另一个重要的实现类TreeMap,在TreeMap中,键值对之间按键有序,Tree ...

  3. Git 获取文件操作

    1. 在本地新建存放源代码的文件夹: 2. 进入文件夹下,右击选择 Git Bash Here ,弹出git命令行窗口: 3. 运行指定 git init,初始化git: 4. git  remote ...

  4. VS2013无法链接到TFS(Visual studio online),错误TF31001,TF31002

    TF31002: Unable to connect to VisualStudio Online with VS 2013 but I can using web access - Windows ...

  5. Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound

    今天查看网站的源代码,发现有个glyphicons-halflings-regular.woff文件没有找到,因为我的网站使用了bootstrap的Glyphicons 字体图标,因此需要加载Glyp ...

  6. tamper绕WAF小结

    sqlmap有一些非常好的脚本,在如下的地址中你能够发现它们.使用svn检查 https://svn.sqlmap.org/sqlmap/trunk/sqlmap sqlmap-dev 事实上,脚本的 ...

  7. topcoder SRM 624 DIV2 BuildingHeightsEasy

    从大到小遍历一遍,每次取M个元素,然后求得最小的floor即可 int minimum(int M, vector <int> heights) { sort(heights.begin( ...

  8. 必须会的SQL语句(三)插入

    1.规范一些使用插入语句的小规范   1)中文字符串前 最好 加一个N   2)列名用中括号 扩起来   像这样  [列名]   2.常规写法 Insert into tableName ( [col ...

  9. 【Longest Common Prefix】cpp

    题目: Write a function to find the longest common prefix string amongst an array of strings. 代码: class ...

  10. 自定义流程gooflow.08 demo在线演示

    一.功能简介 gooflow功能清单1.自定义流程绘制2.自定义属性添加3.支持3种步骤类型 普通审批步骤 自动决策步骤 手动决策步骤 4.决策方式(支持js决策,sql语句决策) 5.审批人员参与方 ...