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>
JS获取元素尺寸大小、鼠标位置的更多相关文章
- js 获取元素坐标 和鼠标点击坐标
js 获取元素的位置 var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect().left); aler ...
- js获取元素宽高、位置相关知识汇总
常见clientWidth.clientHeight.offsetWidth.offsetLeft,clientX.scrollTop等词语,比较混乱,现在总结下他们的区别. 1. clientWid ...
- 【全面总结】js获取元素位置大小
[js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...
- JavaScript获取元素尺寸和大小操作总结
一.获取元素的行内样式 复制代码 代码如下: var obj = document.getElementById("test"); alert(obj.height + " ...
- JavaScript获取元素尺寸和大小操作总结（转载）
一.获取元素的行内样式 var obj = document.getElementById("test"); alert(obj.height + "\n" + ...
- js获取元素位置和style的兼容性写法
今天说一下js获取元素位置和style的方法.当然不只是element.style那么简单.. 主角:getBoundingClientRect,getClientRects,getComputedS ...
- js点击获取—通过JS获取图片的相对坐标位置
一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...
- （转)JS获取当前对象大小以及屏幕分辨率等
原文 JS获取当前对象大小以及屏幕分辨率等 <script type="text/javascript">function getInfo(){ var ...
- JS获取当前对象大小以及屏幕分辨率等...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta nam ...
随机推荐
- C# 提供两种切割圆形图片的方式
效果: private void Form1_Load(object sender, EventArgs e) { string file =System.IO.Path.Combine(Enviro ...
- 使用flume-ng聚合双活Nginx日志
前不久使用Keepalived搭建了Nginx双活代理服务器,以达到一个公网IP后支持多个云主机的多个域名网站的目的.完成后又想在这双活的Nginx上有所有访问网站的日志,之前有了解过Google A ...
- Access restriction: The type QName is not accessible due to restriction on required library
There's another solution that also works. I found it on this forum: Go to the Build Path settings in ...
- maven创建的Web工程，Eclipse 内 tomcat容器不识别的处理方法
相信很多人都遇到这个问题,简单的说明下处理方式 前提是maven配置都是ok的,这里不多说了 1.创建web工程 mvn archetype:create -DgroupId=com.XXX.YYY ...
- js字符串和正则表达式中的match、replace、exec等函数详解
正则并不是经常使用,而正则和字符串之间的函数关系又错综复杂,谁是谁的函数,又是怎么样的一种结果,往往我们是看一遍忘一遍,对此我是头疼不已,感觉自己是个笨蛋^_^. 为了以后不再查文档,特此把常用的函数 ...
- C/C++二维数组的用法
二维数组在存储时按行优先连续存储,数组名是一个二维指针,如 int a[3][2] 中,a 是一个二维指针,而a[0],a[1],a[2]都相当于普通的一位数组的数组名,是一个固定值的指针. 二维数组 ...
- 今天无意发现jquery的一个以前的误导
本文提供即刻提升你的脚本性能的十个步骤.不用担心,这并不是什么高深的技巧.人人皆可运用!这些技巧包括: 使用最新版本 合并.最小化脚本 用for替代each 用ID替代class选择器 给选择器指定前 ...
- AsyncTask 异步处理
1 package com.ch.day8_asynctaskdemo; 2 3 import java.util.ArrayList; 4 5 import com.ch.myutils.NetWo ...
- JS倒计时功能,给定时间返回规定格式倒计时时间
重写了一下,增强了通用性,重写时发现月份和年份计算很复杂,因为月份天数不一样,年份又涉及平年闰年; 本人数学实在不佳无法写出算法,哪位大大日后写出来了分享给小弟一份,谢谢~. <!doctype ...
- 【转载】Log4j详细使用教程
本文由林炳文Evankaka创作,出处http://blog.csdn.net/evankaka 日志是应用软件中不可缺少的部分,Apache的开源项目Log4j是一个功能强大的日志组件,提供方便的日 ...