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 ...
随机推荐
- centos下安装java8
http://tecadmin.net/install-java-8-on-centos-rhel-and-fedora/#
- 有关css伪类visited样式无效的解决方法
错误写法 将visited写在hover和active之后,例如: .ui-page-theme-a .digilinx-ui-btn{background:#00a325;border-color: ...
- String相关的问题
基本事实:对于字符串常量,如果内容相同,Java认为它们代表同一个String对象.而用关键字new 调用的构造器,总是会创建新的对象,无论内容是否相同.字符串常量是放在常量池(或者叫常量缓冲区)里面 ...
- LA 4329 Ping pong 树状数组
对于我这样一名脑残ACMer选手,这道题看了好久好久大概4天,终于知道怎样把它和“树状数组”联系到一块了. 树状数组是什么意思呢?用十个字归纳它:心里有数组,手中有前缀. 为什么要用树状数组?假设你要 ...
- python27 + windows7 报错 No module named requests
1.下载插件包 地址: http://www.lfd.uci.edu/~gohlke/pythonlibs/#distribute 包名: requests-2.12.4-py2.py3-none-a ...
- C# 获取当前路径7种方法
//获取模块的完整路径. string path1 = System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName; //获取 ...
- Spring实现IOC
目录 一.使用XML配置的方式实现IOC 二.使用Spring注解配置IOC 三.自动装配 四.零配置实现IOC 五.示例下载 控制反转IoC(Inversion of Control),是一种设计思 ...
- [Linux系统]查看内存的几种方式
1. cat /proc/meminfo 2.free -m3.vmstat -s4.ps命令可以实时的显示各个进程的内存使用情况.Reported memory usage information ...
- 获取tomcat下路径
import java.io.File; public class MainTest { public static void main(String[] args) { //获取是项目的绝对路径 S ...
- mysql压缩包安装配置
1.在环境变量中添加:MYSQL_HOME:C:\05_study\mysql-5.7.10-winx64,在path路径中加入:%MYSQL_HOME%\bin.配置环境变量不是必须的,只是为了能更 ...