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 ...
随机推荐
- Dev 关于用openFileDialog控件上传图片的问题
1. OpenFileDialog控件有以下基本属性 InitialDirectory 对话框的初始目录 Filter 要在对话框中显示的文件筛选器,例如,"文本文件(*.txt)|*.tx ...
- 【原创】linux 批量清空文本内容
清空所有PHP文件 find . -name '*.php'|xargs sed -i '1,$d' 清空所有文件 find . -type f|xargs sed -i '1,$d'
- sychronized 和 Lock的比较
sychronized是在jvm层面上实现的,可以通过一些监控工具监控sychronized的锁定,而且在代码执行出现异常时,jvm会自动释放锁,但是使用Lock就不行,lock是通过代码实现的,最终 ...
- swift基础：第三部分：对第一部分的补充说明
今天是我学习swift的第二天,虽然我和swift的距离有点远,但我相信,我会慢慢的接近这门语言的.好了,我们聊聊昨天晚上的事吧,昨天晚上下班早,回到家时,真是惊喜哈,宿舍那两做好了饭,等我吃饭,想对 ...
- 夺命雷公狗-----React---26--小案例之react经典案例todos（统计部分的完成）
这一个其实是比较容易的,只需要统计他的总数和已完成的即可, 效果如下所示: 代码如下所示: <!DOCTYPE html> <html lang="en"> ...
- （二）sql入门 管理数据库对象
在数据库里,有各种各样的对象,除了最常见的表之外,还有诸如视图.索引等数据库对象. 这些对象,在数据库里需要有人来管理,那么谁来管理呢?当然是数据库的使用者了.每个使用者相对于数据库里有一片区域,称为 ...
- Apache部署django项目
在此之前,我们一直使用django的manage.py 的runserver 命令来运行django应用,但这只是我们的开发环境,当项目真正部署上线的时候这做就不可行了,必须将我们的项目部署到特定的w ...
- ubuntu16.04.1下的mysql修改默认编码
在Ubuntu 下配置 Mysql 的字符编码.安装完 Mysql 后,系统默认的字符编码是 latin1 ,输入的是中文,可是输出却是一堆乱码.现在要做的就是把 Mysql的默认字符编码设置为支持中 ...
- vs加js引用
今天又有一个同事问我“在VS中如何让一个JS文件智能提示另一个JS文件中的成员”,他说Google了一下,并没有找到答案,然后我把这个小技巧贴出来,希望能被Google到. 有时候会有这种情况:当我的 ...
- IIS Express 配置外部访问
IIS Express是Visual Stuido自带的微型Web服务器,简单易用. IIS Express默认只允许本机访问,通过Visual Studio调试Web程序时,我们有时需要通过外部访问 ...