①offset    包括了元素的边框和内边距和滚动条

offsetWidth、offsetHeight元素的宽度和高度

offsetLeft 、offsetTop元素相对于文档左边和顶部的距离(定位了的元素相对于祖先元素)

②client  不包括边框大小不包含滚动条

clientWidth、clientHeight元素的宽度和高度

clientLeft 、clientTop元素相对于文档左边和顶部的距离(定位了的元素相对于祖先元素)

③scroll

scrollWidth 、scrollHeight元素的内容区域加上内边距，在加上任何溢出内容的尺寸.

scrollLeft & scrollTop

指定的是元素的滚动条的位置

scrollLeft和scrollTop都是可写的属性，通过设置它们来让元素中的内容滚动。

js中width,height,left,top计算的更多相关文章

  1. js中如何通过身份证号计算出生日期和年龄

    在html中有如下标签 身份证号:<input type="text" id="Gra_IDCard" onChange="IDCardChan ...

  2. js中的各种“位置”——“top、clientTop、scrollTop、offsetTop……”，你知道多少

    当要做一些与位置相关的插件或效果的时候,像top.clientTop.scrollTop.offsetTop.scrollHeight.clientHeight.offsetParent...看到这么 ...

  3. JS 中的日期时间操作计算实例

    实例 一:已知日期格式为 "YYYY/MM/DD",计算相对于今天的天数差. function fromNow(date){ var mTimes = new Date(date) ...

  4. js中不同的height, top的对比

    每次看到js中的clientHeight(clientTop), offsetHeight(offsetTop),scrollHeight(scrollTop)就头大,根本分不清这几种的区别,然而碰到 ...

  5. JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义

    JQuery中: width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度: outerWidth()方法用于获得包括内边界(padding)和 ...

  6. css中的width,height，属性与盒模型的关系

    这段话很容易记住盒模型: css中盒子模型包含属性margin.border.padding.content,他们可以把它转移到我们日常生活中的盒子(箱 子)上来理解,日常生活中所见的盒子也具有这些属 ...

  7. offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()

    开篇提示:以下内容都经个人测试,参考API文档总结,但还是不能保证完全正确,若有错误,还请留言指出___________________________________________________ ...

  8. CSS中width和height与盒子模型的关系

    盒子模型 css中盒子模型包含属性margin.border.padding.width与height,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以 ...

  9. js中进行金额计算parseFloat

    在js中进行以元为单位进行金额计算时 使用parseFloat会产生精度问题var price = 10.99;var quantity = 7;var needPay = parseFloat(pr ...

随机推荐

  1. AppCompat v21 — Android 5.0之前版本设备的Material Design实现

    博客原文地址:http://android-developers.blogspot.com/2014/10/appcompat-v21-material-design-for-pre.html,要想打 ...

  2. strus2 action重复执行问题

    近日做项目,有两个模块功能类似,就写到了一个action中,方法起名为getXXX1,getXXX2 最后在两个模块去调用的时候,分别调用DemoAction!getXXX1.action和DemoA ...

  3. sqlserver中数据的四种插入方式

    1.insert into stuInfo(name,stuId) values('李洁','19291727')insert into stuInfo(name,stuId) values('李康' ...

  4. 链表c语言实现

    链表(c语言实现)--------------小练习   #include <stdio.h> #include <stdlib.h> #include <string. ...

  5. D8

    =-=昨天被老师拉去吃点心了就没有发题解...忧伤..昨天的T2貌似都没有调完嗯 今天脑洞是大啊.. T1模拟写挂..呵呵我一面 T2数学题..刚开始只会求素数表的那种方法暴力..不过后面他们都知道一 ...

  6. [转]Decrypt Any iOS Firmware on Mac, Windows, Linux

    source:http://www.ifans.com/forums/threads/decrypt-any-ios-firmware-on-mac-windows-linux.354206/ Dec ...

  7. Android 屏幕截图（底层实现方式）

    加载底层库ScreenCap.java: public class ScreenCap { static { System.loadLibrary("scrcap"); } sta ...

  8. algorithm（算法）

    algorithm(算法) STL中算可以分为三种, 1.变序型队列算法,可以改变容器内的数据: 2.非变序型队列算法,处理容器内的数据而不改变他们 : 3.通用数值算法,这涉及到很多专业领域的算术操 ...

  9. socket网络编程快速上手（二）——细节问题（5）（完结篇）

    6.Connect的使用方式 前面提到,connect发生EINTR错误时,是不能重新启动的.那怎么办呢,是关闭套接字还是直接退出进程呢?如果EINTR前,三次握手已经发起,我们当然希望链路就此已经建 ...

  10. MVC3升级到MVC4模型验证信息显示为英文问题及解决方案

    最近把项目从mvc3升级到mvc4,部署到服务器上出现了一个小问题,就是在表单里字段验证时,验证显示信息为英文,如下: The field 平均租金 must be a number 而在本地是好的, ...