一.定义和用法

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的用法和区别的更多相关文章

  1. clientX,pageX,screenX，offsetLeft，scrollTop

    出处:点击打开链接 一直不太明白,今天看了一下,感觉挺详细,先转载过来....... clientX 观点:鼠标相对于WINDOWS的坐标. 这里这个WINDOWS是指我们能看见的浏览器大小.所以不可 ...

  2. 理解screenX clientX pageX概念

    先了解screenX,clientX,pageX概念 screenX: 鼠标位置相对于用户屏幕水平偏移量,而screenY就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX: 跟s ...

  3. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...

  4. 网页Screen width、height、availWidth、availHeight属性

    *screen.width 功能:声明了显示浏览器的屏幕的宽度,以像素计. 语法:screen.width *screen.height 功能:声明了显示浏览器的屏幕的可用宽度,以像素计. 语法:sc ...

  5. 元素间距属性（scrollLeft,scrollWidth,clientWidth,offsetWidth,padding,margin）

    scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端 ...

  6. 转 scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

    scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最 ...

  7. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLe ...

  8. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释

      HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释scrollHeight: 获取对象的滚动高度. scrol ...

  9. H5,PC网页屏幕尺寸相关整理(scrollLeft,scrollWidth,clientWidth,offsetWidth)

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解scrollHeight: 获取对象的滚动高度. scrollLef ...

随机推荐

  1. 记AppStore 被打回的经历

    在快驰已然有半年时间之久. 见证了“快货运”产品,在不断摧残的环境中成长着.  两个人,将一个产品亲手从无到有的构建,有过心酸.有过累和有过憔悴,但当“快货运”开始上APP store时,又让人觉得开 ...

  2. JSON入门学习

    JSON是一种与开发语言无关的轻量级的数据格式(JavaScript Object Notation) 优点:易于阅读和编写,易于程序解析和生产 JSON数据格式中没有日期及时间的数据格式的.一般直接 ...

  3. Hadoop安装——如何修改端口冲突

    在一个集群中,尽管是多用户,但是端口是公用的,存在冲突的可能.如果另一个用户已经采用默认配置安装了hadoop,那么当前用户再安装hadoop时,必然会产生端口的冲突.在配置自己的hadoop时,可以 ...

  4. ionic 使用

    1. 编译时目录下不能有中文文件的名称,否则会报一个资源错误 ,返回aapt.exe'' finished with non-zero exit value 1. 2. 编译完成后在手机上无法访问网络 ...

  5. Python学习路程day15

    Python之路[第十五篇]:Web框架 Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/en ...

  6. Android深度探索--HAL与驱动开发----第一章读书笔记

    1. Android的系统架构有四层,它的发展目前来说 是比较成熟的,流行于目前的市场.其架构包括四层(linux内核.C/C++代码库.Android SDK API.应用程序). 2. 驱动是直接 ...

  7. HTML5 LocalStorage 本地存储

    HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...

  8. 【转】浅思OC的语言特性

    算了算,学习IOS已经有一段时间了.今天花了点时间思考一下OC的语言特性,让自己的心不要那么浮躁,注重基础,回归本源. OC做为一门面向对象语言,自然具有面向对象的语言特性,如封装.继承.多态.他具有 ...

  9. Device eth0 does not seem to be present, delaying initialization（解决克隆CentOS6.3虚拟机后网卡设备无法启动问题）

    1.删除 /etc/udev/rules.d/70-persistent-net.rules 后重启机器 2.重新启动之后,把/etc/udev/rules.d/70-persistent-net.r ...

  10. Magento后台手动修改订单状态方法及手动修改方法php

    订单详细内容页手动修改订单状态方法: 打开此文件:app\design\adminhtml\default\default\template\sales\order\view\history.phtm ...