鼠标坐标

客户端（可视）的鼠标坐标

MouseEvent.clientX；MouseEvent.clientY在元素上单击鼠标按钮时输出鼠标指针在窗口之间的坐标。

页面鼠标坐标page

光标到页面而非视口左边与上边的距离

MouseEvent.pageX属性返回鼠标位置与文档左侧边缘的距离（单位像素）。

MouseEvent.pageY属性返回与文档上侧边缘的距离（单位像素）。

元素鼠标-坐标offset

MouseEvent.offsetX属性返回鼠标位置与目标节点左侧的padding边缘的水平距离（单位像素），MouseEvent.offsetY属性返回与目标节点上方的padding边缘的垂直距离。这两个属性都是只读属性。

滚动尺寸

window.pageXOffset，window.pageYOffset

window.pageXOffset 只读属性，返回页面的水平滚动距离，单位为像素。

window.pageYOffset只读属性，返回页面的垂直滚动距离，单位为像素。

Element.scrollLeft，Element.scrollTop

Element.scrollLeft 可读可写属性，读取或设置元素的水平滚动条向右滚动的距离。

Element.scrollTop 可读可写属性，获取或设置元素的垂直滚动条向下滚动的距离。

对于那些没有滚动条的网页元素，这两个属性总是等于0。

元素的尺寸

Element.clientWidth，Element.clientHeight

Element.clientWidth 只读属性，返回元素节点的宽度（单位像素）

Element.clientHeight 只读属性，返回元素节点的高度（单位像素）。

这两个属性都只对块级元素生效，对于行内元素返回0。如果块级元素没有设置 CSS 宽度/高度，则返回元素实际的宽高。

除了元素本身的宽高，它还包括padding部分，但是不包括border、margin。如果有滚动条，还要减去滚动条的大小。注意，这个值始终是整数，如果是小数会被四舍五入。

Element.offsetWidth，Element.offsetHeight

Element.offsetHeight 只读属性，返回一个整数，表示元素的 CSS 垂直高度（单位像素），包括元素本身的高度、padding 和 border，以及水平滚动条的高度（如果存在滚动条）。

Element.offsetLeft 只读属性，返回当前元素左上角相对于Element.offsetParent节点的水平位移。Element.offsetTop 只读属性，返回垂直位移，单位为像素。通常，这两个值是指相对于父节点的位移。

offsetWidth,offsetHeight 含padding，含border

clientWidth,clientHeight 含padding，不含border

scrollWidth,scrollHeight 含padding，不含border，若出现滚动条，含元素隐藏部分

元素的位置：相对于有定位方式（position的值是relative、absolute、fixed)的父级元素的位置：参考原点是有定位方式父元素的左上角

屏幕、浏览器和页面尺寸

screen.height,screen.width整个屏幕尺寸

screen.availWidth,screen.availHeight

screen.X,screenY浏览器相对于整个屏幕的位置

浏览器(用户)可视页面尺寸，不包括滚动条

document.documentElement.clientWidth,document.documentElement.clientHeight

整个html网页页面的尺寸，不包括滚动条

document.documentElement.scrollWidth,document.documentElement.scrollHeight

获取页面滚动的尺寸

document.documentElement.scrollLeft,document.documentElement.scrollTop

当滚动条滚动到页面的顶部时——scrollTop = 0

当滚动条滚动到页面的底部时

scrollHeight = clientHeight + scrollTop --> scrollTop = scrollHeight - clientHeight

scroll(0,0);

scroll(0,document.documentElement.scrollHeight);

    scroll({left:0,top:0,behavior:'smooth'//滑动的动画})

JavaScript 鼠标坐标、元素尺寸、浏览器尺寸及坐标相关推荐

JavaScript获取DOM元素位置和尺寸大小
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript ...
JavaScript DOM 9 - 元素的尺寸与位置
1: 获得页面上某个元素在视口坐标系的位置和元素的尺寸: element.getBoundingClientRect():{ left:8top:104right:1432bottom: 158wid ...
vue 获取元素在浏览器的位置_JavaScript获取窗口位置和元素坐标（兼容版）
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript ...
BOM 浏览器窗口尺寸浏览器的弹出层浏览器的地址栏浏览器的历史记录浏览器的版本信息浏览器的常见事件浏览器卷去的高度和宽度
浏览器窗口尺寸 + 指的是浏览器可视窗口的尺寸 + 浏览器可能会出现滚动条=> 在一般浏览器中,滚动条算浏览器的一部分=> 在MAC中的safari浏览器上,是不算的滚动条是隐形的 + ...
DOM初探（16）——查看元素的集合尺寸
三:DOM基本操作: 查看元素的集合尺寸 domEle.getBoundingClientRect(); 兼容性很好改方法返回一个对象,对象里面有left,top,right,bottom等属性.l ...
html 元素允许右键,JavaScript 自定义html元素鼠标右键菜单功能
自定义html元素鼠标右键菜单实现思路在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值 ...
浏览器尺寸判断（兼容标准及低版本ie浏览器）
1.总体思路:先判断浏览器类型,再根据不同浏览器类型用不同方法获取浏览器尺寸: 2.html <!DOCTYPE html> <html><head><met ...
已知圆心坐标和一点坐标和角度就之后的坐标_《6. AutoCAD 标注角度尺寸》
与几何图形,文字注释一样,尺寸标注也是图志的重要组成部分,它能将图形间的相互位置关系以及形状等进行数字化.参数化,已更直观地表达图形的尺寸,是施工人员现场施工的重要的主要依据.本章集中讲述了直线型尺寸 ...
jquery 获取鼠标和元素的坐标点
获取当前鼠标相对img元素的坐标 [javascript] view plaincopy $('img').mousemove(function(e) { varpositionX=e.pageX-$ ...
Javascript学习7 - 脚本化浏览器窗口
原文:Javascript学习7 - 脚本化浏览器窗口本节讨论了文档对象模型.客户端Javascript下Window中的各项属性,包括计时器.Location对象.Histroy对象.窗口.浏览器 ...

JavaScript 鼠标坐标、元素尺寸、浏览器尺寸及坐标

鼠标坐标

元素的尺寸

屏幕、浏览器和页面尺寸

JavaScript 鼠标坐标、元素尺寸、浏览器尺寸及坐标相关推荐

最新文章

热门文章