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 ...
随机推荐
- 纪勇破解QQ号问题
试题描述 来到了新学校,才相处不到一个月,jy就对oyjy一见钟情.于是向oyjy问QQ号.当然身为创(实)新(验)一班的同学,oyjy还是要考考jy.她给了纪勇一个加密后的QQ号,让纪勇解密,解密规 ...
- eclipse中Maven创建WEB项目
刚刚学到Maven的时候总是容易忽视到一些创建Maven项目是的步骤, 这里记录笔者熟悉一种,直接创建Maven Project 下面开始吧--- 选择web-app,没得说,然后那些groupID ...
- android 案例二 登录界面
效果图: 运行图: 总结: 编写这个简单的用户登录界面,主要用到了以下的知识: java基础中的IO流的操作 用以读取.显示用户的信息 Android布局 线性布局和相对布局 数据的存储选在包 ...
- [Struts2] Action Implements SessionAware
struts2 的Action中若希望访问Session对象,可采用两种方式: 1.从ActionContext中获取: 2.实现SessionAware接口. 1.从ActionContext中获取 ...
- 几个js函数
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- js通过隐藏iframe修改session值
js:function selects(id, ss) { window.frames["UpSession"].window.location.href = "../U ...
- 苹果版App开发心得
这几个月中做的工作包括网站开发.安卓App开发和苹果App开发,前两者用的语言都是我熟悉的java,故苹果知识的学习,较安卓知识的学习,多出「语言基础」一块,其他方面差不多. 之前发过安卓那篇,如感兴 ...
- 修改tnsnames.ora文件中配置内容中的连接别名后，连接超时解决办法
1.tnsnames.ora文件中配置内容中的连接别名:由upaydb修改为IP地址 2.连接超时 定位原因: PLSQL登录界面的数据库列表就是读的tnsname.ora中连接的别名,这个文件中连接 ...
- python获取绝对路径
import osimport sysprint 'os.getcwd()=',os.getcwd()print 'sys.argv=',sys.argvprint 'sys.argv[0]=',sy ...
- Java数据结构之回溯算法的递归应用迷宫的路径问题
一.简介 回溯法的基本思想是:对一个包括有很多结点,每个结点有若干个搜索分支的问题,把原问题分解为对若干个子问题求解的算法.当搜索到某个结点.发现无法再继续搜索下去时,就让搜索过程回溯(即退回)到该结 ...