clientX、pageX、scrollLeft、offsetLeft、clientWidth、screen.width的用法和区别
一.定义和用法
1.event.clientX:事件对象的水平偏移量;
event.clientY:事件对象的垂直偏移量;
2.event.pageX:事件对象加上滚动距离后的水平偏移量;
event.pageY:事件对象加上滚动距离后的垂直偏移量;
3.$(selector).scrollLeft(offset):获得或设置对象的滚动水平位置;
$(selector).scrollTop(offset):获得或设置对象的滚动垂直位置;
4.div.offsetLeft:对象的水平偏移量;
div.offsetTop:对象的垂直偏移量;
5.div.clientWidth:对象的宽度;
div.clientHeight:对象的高度;
6.screen.width:整个屏幕宽度;
screen.height:整个屏幕高度;
二、图片如下:

clientX、pageX、scrollLeft、offsetLeft、clientWidth、screen.width的用法和区别的更多相关文章
- clientX,pageX,screenX,offsetLeft,scrollTop
出处:点击打开链接 一直不太明白,今天看了一下,感觉挺详细,先转载过来....... clientX 观点:鼠标相对于WINDOWS的坐标. 这里这个WINDOWS是指我们能看见的浏览器大小.所以不可 ...
- 理解screenX clientX pageX概念
先了解screenX,clientX,pageX概念 screenX: 鼠标位置相对于用户屏幕水平偏移量,而screenY就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX: 跟s ...
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...
- 网页Screen width、height、availWidth、availHeight属性
*screen.width 功能:声明了显示浏览器的屏幕的宽度,以像素计. 语法:screen.width *screen.height 功能:声明了显示浏览器的屏幕的可用宽度,以像素计. 语法:sc ...
- 元素间距属性(scrollLeft,scrollWidth,clientWidth,offsetWidth,padding,margin)
scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端 ...
- 转 scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最 ...
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLe ...
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释scrollHeight: 获取对象的滚动高度. scrol ...
- H5,PC网页屏幕尺寸相关整理(scrollLeft,scrollWidth,clientWidth,offsetWidth)
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解scrollHeight: 获取对象的滚动高度. scrollLef ...
随机推荐
- ACM 字符串 题目整理
AC自动机 UVa 11468 Substring AC自动机+概率DP. 注意要补全不存在的边. 为什么要补全不存在的边呢?补全以后可以直接找到状态的转移,即从所有子节点就可以实现所有状态转移. ...
- Amazon AWS 架设EC2服务器(datizi)fanqiang (更新手机VPN/L2TP设置)
今天用AWS在东京架设了一台服务器用来个人fanqiang.为什么用AWS呢,阿里云学生价9.9可以搭在香港,但是我的学制今年2月份在学信网上就到期了,腾讯云holy shit,我司AZURE据说员工 ...
- yii开发一个web程序的基本流程
1. 创建目录结构.在前面的章节Creating First Yii Application写的yiic工具可以帮助我们快速完成这步. 2. 配置 application.就是修改applicatio ...
- 学习linux/unix编程方法的建议(转)
假设你是计算机科班出身,计算机系的基本课程如数据结构.操作系统.体系结构.编译原理.计算机网络你全修过 我想大概可以分为4个阶段,水平从低到高从安装使用=>linux常用命令=>linux ...
- ASP.NET Repeater 控件分页
protected void Page_Load(object sender, EventArgs e) { HttpContext context = HttpContext.Current; co ...
- Direct3D 10学习笔记(二)——计时器
本篇将简单整理Direct3D 10的计时器实现,具体内容参照< Introduction to 3D Game Programming with DirectX 10>(中文版有汤毅翻译 ...
- POM
代码的第一行是xml头,指定了该xml文档的版本和编码方式 project是所有pom.xml的根元素,还声明了一些POM相关的命名空间及xsd元素. modelVersion指定了当前POM模型的版 ...
- 函数中的static静态变量
静态变量仅在局部函数域中存在且只被初始化一次,当程序执行离开此作用域时,其值不会消失,会使用上次执行的结果. <?php function testStatic($start,$end){ st ...
- ABAP工作区,内表,标题行的定义和区别
工作区域跟变量一样,是用来保存数据的.区别是变量只能从中保存一个数据.而工作区域可以存放多个.把多个数据合在一起就成工作区域了.下面我们来看看工作区域是如何定义的吧.定义有四种方法,如下:1 ...
- Code Review Tools
Code Review中文应该译作“代码审查”或是“代码评审”,这是一个流程,当开发人员写好代码后,需要让别人来review一下他的代码,这是一种有效发现BUG的方法.由此,我们可以审查代码的风格.逻 ...