js中常用的offset client screen对象
offsetWidth //返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距) offsetHeight //返回元素的高度(包括元素高度、内边距和边框,不包括外边距) clientWidth //返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距) clientHeight //返回元素的高度(包括元素高度、内边距,不包括边框和外边距) style.width //返回元素的宽度(包括元素宽度,不包括内边距、边框和外边距) style.height //返回元素的高度(包括元素高度,不包括内边距、边框和外边距) scrollWidth //返回元素的宽度(包括元素宽度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientWidth相同 scrollHeigh //返回元素的高度(包括元素高度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientHeight相同
1. style.width 返回的是字符串,如28px,offsetWidth返回的是数值28;
2. style.width/style.height与scrollWidth/scrollHeight是可读写的属性,clientWidth/clientHeight与offsetWidth/offsetHeight是只读属性
3. style.width的值需要事先定义,否则取到的值为空。而且必须要定义在html里(内联样式),如果定义在css里,style.height的值仍然为空,但元素偏移有效;而offsetWidth则仍能取到。
offsetTop //返回元素的上外缘距离最近采用定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离。
所谓的定位就是position属性值为relative、absolute或者fixed。返回值是一个整数,单位是像素。此属性是只读的。
offsetLeft //此属性和offsetTop的原理是一样的,只不过方位不同,这里就不多介绍了。
scrollLeft //此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离,也就是元素被滚动条向左拉动的距离。
返回值是一个整数,单位是像素。此属性是可读写的。
scrollTop //此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离,也就是元素滚动条被向下拉动的距离。
返回值是一个整数,单位是像素。此属性是可读写的。
当鼠标事件发生时(不管是onclick,还是omousemove,onmouseover等)
clientX 鼠标相对于浏览器(这里说的是浏览器的有效区域)左上角x轴的坐标; 不随滚动条滚动而改变;
clientY 鼠标相对于浏览器(这里说的是浏览器的有效区域)左上角y轴的坐标; 不随滚动条滚动而改变;
pageX 鼠标相对于浏览器(这里说的是浏览器的有效区域)左上角x轴的坐标; 随滚动条滚动而改变;
pageY 鼠标相对于浏览器(这里说的是浏览器的有效区域)左上角y轴的坐标; 随滚动条滚动而改变;
screenX 鼠标相对于显示器屏幕左上角x轴的坐标;
screenY 鼠标相对于显示器屏幕左上角y轴的坐标;
offsetX 鼠标相对于事件源左上角X轴的坐标
offsetY 鼠标相对于事件源左上角Y轴的坐标
js中常用的offset client screen对象的更多相关文章
- JS中常用坐标offset、scroll、client的区别
在IE中scrollWidth:获取对象的滚动宽度scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop ...
- 原生JS中常用的Window和DOM对象操作汇总
一.常用的Window对象操作 Window对象中又包含了document.history.location.Navigator和screen几个对象,每个对象又有自己的属性方法,这里window可以 ...
- js中常用的对象—String的属性和方法
今天说一下,js中常用的内置对象——String对象它有以下几个常用的属性:lengthprototype 有以下几个常用的方法:parseInt()转换为数字parseFloat()转换为数字,支持 ...
- js中常用的对象—Array的属性和方法
今天说一下,js中常用的内置对象——Array对象 Array常用属性: length prototype :给系统对象添加属性和方法 Array常用方法: Array.prototype.sum = ...
- JS中常用开发知识点
JS中常用开发知识点 1.获取指定范围内的随机数 2.随机获取数组中的元素 3.生成从0到指定值的数字数组 等同于: 4.打乱数字数组的顺序 5.对象转换为数组 //注意对象必须是以下格式的才可以通 ...
- 今天给大家分享一下js中常用的基础算法
今天给大家分享一下js中常用的基础算法,废话不多说,直接上代码: 1.两个数字调换顺序 ,b= function fun(a,b){ b = b - a ;// a = 2 ; b = 2 a = a ...
- js中常用追加元素的几种方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js中常用的操作
1.js中常用的数组操作 2.js中常用的字符串操作 3.js中常用的时间日期操作 4.定时器
- 基础篇:1.JavaScript运行在html中,引用有几种方式?—— 6.js中常用的输出方式?
书接上文,上文提到若干条JavaScript的基础性知识,大部分都是一些概念性的东西,本着认真严谨的态度,我们要认真对待,有些条目的问题是某个知识点的周边延伸,为节约篇幅,就一起整理了,如有描述不对的 ...
随机推荐
- one-to-all及all-to-all网络通信模式
在这两种模式下,因为 占用的通信通道非常高,形成了一个一对多的通道 甚至是多对多的通道,导致现有的fattree网络结构负载太大.
- 简单网络搭建与测试 mininet
简介 本实验是基于pox搭建简单的网络并测试网络的连通性,利用mininet代码创建一个交换机四个主机的拓扑,测试各主机之间的连通性以及h1.h4之间的带宽. 代码 实验代码如下所示,SingleSw ...
- Zookeeper系列五:Master选举、ZK高级特性:基本模型
一.Master选举 1. master选举原理: 有多个master,每次只能有一个master负责主要的工作,其他的master作为备份,同时对负责工作的master进行监听,一旦负责工作的mas ...
- Java8学习笔记(九)--日期/时间(Date Time)API指南
Java 8日期/时间( Date/Time)API是开发人员最受追捧的变化之一,Java从一开始就没有对日期时间处理的一致性方法,因此日期/时间API也是除Java核心API以外另一项倍受欢迎的内容 ...
- Map字符串类型去掉空格处理
Iterator it = data.keySet().iterator(); for (; it.hasNext();) { if( data.get(key) instanceof Strin ...
- linux环境中,top命令中,对command的命令进行扩展查看详情?
需求说明: 在使用top命令进行资源情况使用查看时,经常出现以下情况: 备注:也就是说,在COMMAND列中,有多个java进程,想要知道每个java具体的对应的是哪个程序的进程. 通过top命令的c ...
- java 多线程并发 synchronized 同步机制及方式
2. 锁机制 3. 并发 Excutor框架 4. 并发性与多线程介绍 1. synchronized 参考1. synchronized 分两种方式进行线程的同步:同步块.同步方法 1. 方法同步 ...
- [R]统计工具包
Wilcoxon Rank Sum and Signed Rank Tests data <-read.csv('XX.csv') wilcox.test(data$value1, data$v ...
- Windows-NTFS-ADS在渗透测试中的利用
0.什么是ADS Windows:微软公司的一款视窗操作系统,其内核为WindowsNT. NTFS:WindowsNT环境的限制级专用文件系统. ADS:NTFS的系统特性,交换数据流(Altern ...
- Android摸索一环境搭建
用户场景:做语音保全,首先要拨打400号码,听到语音后需要先按1然后再拨打对方号码,那么问题就来了,如果我记不清楚对方号码!是不是很苦逼----我要先找到对方号码然后用笔或者其他方式把这个号码记录下来 ...