①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. swfupload多文件上传[附源码]

    swfupload多文件上传[附源码] 文件上传这东西说到底有时候很痛,原来的asp.net服务器控件提供了很简单的上传,但是有回传,还没有进度条提示.这次我们演示利用swfupload多文件上传,项 ...

  2. 生成自己的Webapi帮助文档（一）

    最近Webapi接口的开发刚刚进入尾声,随之而来的是让用户知道接口的详细参数信息,看过淘宝的接口文档,但网上没找到他的实现方式 虽然新建Webapi时C#也会给你一个帮助文档的Area,但是总觉得有些 ...

  3. c++对象内存布局的理解

    我对c++对象内存布局的理解   引言 结合网上的一些资料,通过自己的一番摸索,得出了一点个人见解.现在写下来,希望与各位同学共同探讨,共同进步. 以下所有代码均是在VS2012下测试. 一个普通的基 ...

  4. api的安全问题

      在给第三方系统提供api时,我们需要注意下安全问题. 比较常见的接口有http接口.以http接口为例.我们需要注意的几点: 1.只有被允许的系统才可以调用api 2.如果http请求被截获.也不 ...

  5. ESB与SOA的关系

    ESB与SOA的关系 一.SOA和ESB一直是没有明确概念的两个缩略词 SOA----面向服务架构,实际上强调的是软件的一种架构,一种支撑软件运行的相对稳定的结构,表面含义如此,其实SOA是一种通过服 ...

  6. Undefined class constant 'MYSQL_ATTR_USE_BUFFERED_QUERY'

    The error that occurs is:Fatal error: Undefined class constant 'MYSQL_ATTR_USE_BUFFERED_QUERY' in /w ...

  7. 用django搭建一个简易blog系统（翻译）（四）

    12. Create the templates 你需要做三件事来去掉TemplateDoesNotExist错误 第一件,创建下面目录 * netmag/netmag/templates * net ...

  8. 简单的mvc之一：简单的开始

    mvc学习到现在,相对所学到的一系列的知识做一个总结,于是就有了这个标题—简单的mvc.文如名,写的是简单的mvc的知识,目标群也不言而喻.这一篇来个简单的开始,从头建立一个web项目,比如hello ...

  9. IT职位分析

    人才市场的IT职位分析   最近要找长沙的工作,于是通过湖南人才市场搜索了一下职位.结果得到的数据让我很难比较,作为一个 IT 业滚爬了多年的程序员,对这样的搜索结果很不满意.于是,我不得不自己来整理 ...

  10. Oracle实现主键自增长

    -- 主键设置:xx_id number(24) primary key 1 create sequence XX_seq --序列名称 increment by 1 -- 每次加几个 start - ...