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 获取网页可视区域高度 (两张用法) 盒子调用: 指盒子本省 浏览器调用: ...
随机推荐
- 安装 mrtg
http://blog.csdn.net/cnbird2008/article/details/2072627
- OGG数据仓库以及单向复制(二)
Configure Extract(提取) Process in Source system 配置capture(捕获)参数 Edit extract process parameter G ...
- JS效果的步骤
一.写JS效果的步骤 1.先实现布局 (XHTML+CSS2) 2.实现原理 (1)希望把某个元素移除你的视线: a. display:none; 显示为无,不占据空间 b. vi ...
- eclipse jsp html 格式化 format
eclipse jsp html 格式化 format http://blog.csdn.net/hexin373/article/details/7677250
- Eclipse中TODO的分类,以及自动去除
Window-Preference-Java-Compiler-Task Tags; 这里面进行TaskTag标签的定义,默认支持FIXME.TODO.XXX三种:优先级高的在taskview中 会显 ...
- .NET操作RabbitMQ组件EasyNetQ使用中文简版文档。
本文出自EasyNetQ官方文档,内容为自己理解加翻译.文档地址:https://github.com/EasyNetQ/EasyNetQ/wiki/Quick-Start EasyNetQ简介 Ea ...
- HDU 4570(区间dp)
E - Multi-bit Trie Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u ...
- page cache 与free
我们经常用free查看服务器的内存使用情况,而free中的输出却有些让人困惑,如下: 先看看各个数字的意义以及如何计算得到: free命令输出的第二行(Mem):这行分别显示了物理内存的总量(tota ...
- 如何利用express新建项目(上)
如何利用express新建项目(上) 摘要 这篇文章将讲解了如何快速利用express新建项目 一.express4.x的安装 1. npm install -g express 2. npm ins ...
- CF 752C. Santa Claus and Robot
C. Santa Claus and Robot time limit per test 2 seconds memory limit per test 256 megabytes input sta ...