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

  1. 三大家族(offset、scroll、client)

    offset.scroll.client三大家族 offset家族 offsetWidth 与 offsetHeight offset 偏移 用于获取元素自身的位置和大小 offsetWidth和of ...

  2. js 三大家族之offset

    JS中的offset家族: 一.offsetWidth与offsetHeight: 获取的是元素的实际宽高 = width + border + padding 注意点: 1.可以获取行内及内嵌的宽高 ...

  3. JS中的offset scroll event client

    一.offset 一般用来检测盒子的偏移.位移,都是只读属性,不能赋值 offsetWidth和offsetHeight表示的是:调用者盒子的宽和高,包括盒子自身的padding和border off ...

  4. JS中client/offset/scroll等的宽高解析

    原文地址:→传送门 window相关宽高属性 1. window.outerHeight (窗口的外层的高度) / window.outerWidth (窗口的外层的宽度) window.outerH ...

  5. client offset scroll 之间的区别

    一.client 属性 值 clientWidth 元素被设置的宽度 + padding左右内间距 clientHeight 元素被设置的高度 + padding上下内间距 clientLeft 左 ...

  6. JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装

    知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top  : if (true === a)tr ...

  7. javascript总结46: JS三大系列-方便的offset 家族

    1 offset 家族 offset这个单词本身是--偏移,补偿,位移的意思. js中有一套方便的获取元素尺寸的办法就是offset家族: 2  offset 结构介绍为: 3 offset常用属性 ...

  8. 第52天:offset家族、scroll家族和client家族的区别

    一.offset家族 1.offsetWidth offsetHeight offsetLeft offsetTop offsetParent共同组成了offset家族,用来获取元素尺寸. offse ...

  9. 三大家族,offset,scroll,client

    1.client 1.1主要成员 1.clientWidth 获取网页可视区域宽度(两种用法)    clientHeight 获取网页可视区域高度 (两张用法) 盒子调用: 指盒子本省 浏览器调用: ...

随机推荐

  1. 安装 mrtg

    http://blog.csdn.net/cnbird2008/article/details/2072627

  2. OGG数据仓库以及单向复制(二)

    Configure Extract(提取)      Process in Source system 配置capture(捕获)参数 Edit extract process parameter G ...

  3. JS效果的步骤

    一.写JS效果的步骤 1.先实现布局 (XHTML+CSS2) 2.实现原理 (1)希望把某个元素移除你的视线: a.  display:none;         显示为无,不占据空间 b.  vi ...

  4. eclipse jsp html 格式化 format

    eclipse jsp html 格式化 format http://blog.csdn.net/hexin373/article/details/7677250

  5. Eclipse中TODO的分类,以及自动去除

    Window-Preference-Java-Compiler-Task Tags; 这里面进行TaskTag标签的定义,默认支持FIXME.TODO.XXX三种:优先级高的在taskview中 会显 ...

  6. .NET操作RabbitMQ组件EasyNetQ使用中文简版文档。

    本文出自EasyNetQ官方文档,内容为自己理解加翻译.文档地址:https://github.com/EasyNetQ/EasyNetQ/wiki/Quick-Start EasyNetQ简介 Ea ...

  7. HDU 4570(区间dp)

    E - Multi-bit Trie Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u ...

  8. page cache 与free

    我们经常用free查看服务器的内存使用情况,而free中的输出却有些让人困惑,如下: 先看看各个数字的意义以及如何计算得到: free命令输出的第二行(Mem):这行分别显示了物理内存的总量(tota ...

  9. 如何利用express新建项目(上)

    如何利用express新建项目(上) 摘要 这篇文章将讲解了如何快速利用express新建项目 一.express4.x的安装 1. npm install -g express 2. npm ins ...

  10. 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 ...