offsetHeight offsetWidth返回为元素在屏幕上显示大小,不包括外边距

clientHeight clientWidht 和上面两个类似,不同的是,这两个不包括外边距高度。
<div style="width:100px;height:100px;overflow:auto"></div>如果此元素的内容过长,就会出现滚动条。 
 
scrollHeight scrollWidth 返回内容显示高度+内边距+溢出内容高度。而offsetHeight返回值为就是块元素的宽高(不包括外边距);
在没有溢出内容的时候scrollHieght和clientHeight相同;
 
offsetTop offsetLeft对于没有进行定位的元素来说,返回其文档坐标。对于定位元素来说,返回其相对父元素左上角的坐标。offsetParent来引用父元素
对于上面实例代码中的element来说,不管其父元素怎么滚动条,offsetTop返回的都是滚动条为0的时候,element的文档坐标。如果想要得到视觉上的文档坐标,需要减去element父元素的滚动条偏移量
 
clientTop clientLeft 基本没什么作用,返回内边距到外边距的距离,相当于边框高度。如果滚动条出现在左侧或者上侧,则也包括滚动条的宽高。
scrollTop scrollLeft 返回元素滚动条的偏移量(可进行滚动条设置)
 

offset client scroll的更多相关文章

  1. JavaScript中的 offset, client,scroll

    在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...

  2. offset/client/scroll一些总结

    offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...

  3. js中 offset /client /scroll总结

    offset家族(只能读取,不能操作): offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(就是子元素左边框到父元素左边框的距离). offsetTo ...

  4. js 元素offset,client , scroll 三大系列总结

    1,element.offsetWidth : 包括 padding 和 边框 2,element.clientWidth : 包括 padding ,不包含边框 , 内容超出会溢出盒子的时候,就用s ...

  5. bom中的offset,client,scroll

    简单明了

  6. JS 中的offset、scroll、client总结

    经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...

  7. client/scroll/offset width/height/top/left ---记第一篇博客

    client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth  width+左p ...

  8. javascript中常用坐标属性offset、scroll、client

    原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...

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

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

随机推荐

  1. Extjs 3.4 复选框的,默认选中 ,禁用,(纯属于自己代码中需要,总结!)

    var sm = new Ext.grid.CheckboxSelectionModel( {         //一个特定的选择模型,它将渲染一列复选框,可以用来选择或反选多行数据.         ...

  2. JVM参数设置、分析(转发)

    JVM参数的含义 实例见实例分析 参数名称 含义 默认值   -Xms 初始堆大小 物理内存的1/64(<1GB) 默认(MinHeapFreeRatio参数可以调整)空余堆内存小于40%时,J ...

  3. viewpager实现酷炫侧滑demo

    晚上叫外卖,打开饿了么,发现推了一个版本,更新以后,点开了个鸡腿,哇,交互炫炸了. 不过还是有槽点.我是无意中才发现可以左右滑动的.这...你不告诉我,我怎么知道左右可以滑. https://gith ...

  4. String类型,Function类型

    1.String类型:  1)创建String对象:    var str=new String(s);    String(s);    参数:参数 s 是要存储在 String 对象中的值或转换成 ...

  5. 【转】Struts1.x系列教程(6):Bean标签库

    转载地址:http://www.blogjava.net/nokiaguy/archive/2009/01/archive/2009/01/archive/2009/01/archive/2009/0 ...

  6. Java 泛型和通配符解惑

    转自:http://www.linuxidc.com/Linux/2013-10/90928.htm T  有类型 ?  未知类型 一.通配符的上界 既然知道List<Cat>并不是Lis ...

  7. MySQL 常用命令

    mysql -uroot -pXXXXXXXXX //登陆mysql mysqladmin -u 用户名 -p 旧密码 password 新密码 创建数据库并分配用户 create database ...

  8. C++string中有关字符串内容修改和替换的函数浅析

    1.assign() 原型: //string (1) basic_string& assign (const basic_string& str); //substring (2) ...

  9. Java中Object类

    Object类是所有类的父类,如果一个类没有使用extends关键字明确标识继承另一个类,那么这个类默认继承Object类. Object类中的方法,适合所有子类. Object中的几个重要方法: 1 ...

  10. Java 输入输出流 转载

    转载自:http://blog.csdn.net/hguisu/article/details/7418161 1.什么是IO Java中I/O操作主要是指使用Java进行输入,输出操作. Java所 ...