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 ...
随机推荐
- Windows Phone 十五、HttpWebRequest
Windows 运行时中支持网络资源访问的对象:HttpWebRequest 对象 发送 GET/POST 请求,HttpHelper 封装,超时控制. HttpClient 对象 发送 GET/PO ...
- 17.如何修改SESSION的生存时间。
方法1:将php.ini中的session.gc_maxlifetime设置为9999重启apache 方法2:$savePath = "./session_save_dir/"; ...
- iOS简单动画
知识架构 CALayer 图层类 CABasicAnimation 基础动画 CAKeyFrameAnimation 帧动画 CATransition 转场动画 CAAnimationGroup 动画 ...
- anagularJs指令的controller，link，compile有什么不同
/directives.js增加exampleDirective phonecatDirectives.directive('exampleDirective', function() { retur ...
- YbSoftwareFactory 代码生成插件【十四】：通过 DynamicLinq 简单实现 N-Tier 部署下的服务端数据库通用分页
YbSoftwareFactory 的 YbRapidSolution for WinForm 插件使用CSLA.NET作为业务层,CSLA.NET的一个强大的特性是支持 N-Tiers 部署.只需非 ...
- 写Python脚本语言时，“SyntaxError: Non-ASCII character '\xe6' in file”错误的处理
如图是一段简单的文件操作代码,以为打开文件"test1221_1.py",若不存在此文件,则创建此文件.接下来并输出相关信息. 当少写了黄色方框圈起来的一行看似不经意的带有编码格式 ...
- python 实现简单 http 代理
有台 openwrt 路由器,16M flash存储 + 64M 内存 ,可以装 python .因为没有自带 url 网站访问记录,想手写一个. 原理: http 1.1 也就是 tcp 连接,有 ...
- javascript: parse JSON
$.get("/intra/do/sequence_has_codonList.pl",function(data){ data = JSON.parse(data); // ar ...
- java 建造者模式
package de.bvb.test3; /** * 建造者模式: 假如一个类有4个字段,每个字段或者每几个字段的组合都需要设置为构造函数,构造函数就比较麻烦 * 而且如果再加一个字段进去也不好拓展 ...
- git 远程库命令
git 常用命令在这里就不在说了,初学者点击http://www.cnblogs.com/Vdiao/p/5267250.html Git是分布式版本控制系统,同一个Git仓库,可以分布到不同的机器上 ...