js三大家族offset,scroll,cliennt的区别
offset偏移(返回的是number类型)
offsetLeft:返回盒子距离左边的距离
offsetTop:返回盒子距离顶部的距离
offsetHeight:返回盒子的高度,包括border,padding,不包括margin;
offsetWidth:返回盒子的宽度,包括border,padding,不包括margin;
offsetX:
offsetY:
offsetParent:找到有定位的父元素
offset与style.top的区别:
1.offset可以返回没有定位的盒子距离左边的位置,style.top不可以;
2.style.top只能返回行内式,如果没有则返回"";
3.offset返回的是number,style.top返回的是String,加px;
4.offset只读,style.top可读写;
scroll卷曲
scrollLeft:x轴卷曲的距离(ie8不支持)
scrollTop:Y轴卷曲的距离(ie8不支持)
/**
* 兼容封装的scrollLeft和scrollTop
* @returns {{left: (Number|number), top: (Number|number)}}
*/
function getScroll() {
return{
left: window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0,//获取的浏览器的scrollLeft
top: window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0//获取的浏览器的scrollTop
};
}
scrollHeight:实际页面的高度(如果页面超出了盒子的高度,则是内容的值,如果没有超出去则是盒子的值)
scrollWidth:实际页面的宽度(width+padding)
scrollX:
scrollY:
client可视区域
clientLeft:
clientTop:
clientWidth:
clientHeight:
clientX:
clientY:
js三大家族offset,scroll,cliennt的区别的更多相关文章
- 三大家族(offset、scroll、client)
offset.scroll.client三大家族 offset家族 offsetWidth 与 offsetHeight offset 偏移 用于获取元素自身的位置和大小 offsetWidth和of ...
- js 三大家族之offset
JS中的offset家族: 一.offsetWidth与offsetHeight: 获取的是元素的实际宽高 = width + border + padding 注意点: 1.可以获取行内及内嵌的宽高 ...
- JS中的offset scroll event client
一.offset 一般用来检测盒子的偏移.位移,都是只读属性,不能赋值 offsetWidth和offsetHeight表示的是:调用者盒子的宽和高,包括盒子自身的padding和border off ...
- JS中client/offset/scroll等的宽高解析
原文地址:→传送门 window相关宽高属性 1. window.outerHeight (窗口的外层的高度) / window.outerWidth (窗口的外层的宽度) window.outerH ...
- client offset scroll 之间的区别
一.client 属性 值 clientWidth 元素被设置的宽度 + padding左右内间距 clientHeight 元素被设置的高度 + padding上下内间距 clientLeft 左 ...
- JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装
知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top : if (true === a)tr ...
- javascript总结46: JS三大系列-方便的offset 家族
1 offset 家族 offset这个单词本身是--偏移,补偿,位移的意思. js中有一套方便的获取元素尺寸的办法就是offset家族: 2 offset 结构介绍为: 3 offset常用属性 ...
- 第52天:offset家族、scroll家族和client家族的区别
一.offset家族 1.offsetWidth offsetHeight offsetLeft offsetTop offsetParent共同组成了offset家族,用来获取元素尺寸. offse ...
- 三大家族,offset,scroll,client
1.client 1.1主要成员 1.clientWidth 获取网页可视区域宽度(两种用法) clientHeight 获取网页可视区域高度 (两张用法) 盒子调用: 指盒子本省 浏览器调用: ...
随机推荐
- Jq对象与dom对象的互相转换!
JQ对象转化成dom对象 var a=$('div'); var b=a[0];//dom对象 转化成dom对象以后就可以使用dom方法了 dom对象转化成jq对象 var a=document.ge ...
- delphi 字符串查找替换函数 转
1. 提取字符串中指定子字符串前的字符串 Function Before( Src:string ; S:string ): string ; Var F: Word ; begin ...
- HDU 3374 String Problem (KMP+最大最小表示)
HDU 3374 String Problem (KMP+最大最小表示) String Problem Time Limit: 2000/1000 MS (Java/Others) Memory ...
- [ Android 五种数据存储方式之三 ] —— SQLite存储数据
SQLite是轻量级嵌入式数据库引擎,它支持 SQL 语言,并且只利用很少的内存就有很好的性能.此外它还是开源的,任何人都可以使用它.许多开源项目((Mozilla, PHP, Python)都使用了 ...
- AdapterViewFlipper的功能和用法
AdapterView继承了AdapterViewAnimator,它也会显示Adapter提供的多个View组件,但每次只能显示一个View组件,程序可通过showPrevious和showNext ...
- easelJS - Cache_vday
easelJS - Cache_vday $(function() { init(); }); // Cache_vday var canvas; var stage; var container; ...
- spring mvc 资源包的映射
在springmvc.xml中进行设置: <?xml version="1.0" encoding="UTF-8"?> <beans xmln ...
- IOS隐藏navigationItem左右按钮的方法
在移除一个View的时候或者根据需要希望让navigationItem的rightBarButtonItem或者leftBarButtonItem处于隐藏状态,一个简单的方法如下: self.na ...
- linux命令行模式下对FTP服务器进行文件上传下载
参考源:点击这里查看 1. 连接ftp服务器 格式:ftp [hostname| ip-address]a)在linux命令行下输入: ftp 192.168.1.1 b)服务器询问你用户名和密码 ...
- EF6多线程与分库架构设计之Repository
1.项目背景 这里简单介绍一下项目需求背景,之前公司的项目基于EF++Repository+UnitOfWork的框架设计的,其中涉及到的技术有RabbitMq消息队列,Autofac依赖注入等常用的 ...