①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. Android调用本机应用市场，实现应用评分功能

    原本以为应用评分是个很小的功能,但是一实现才发现真不是个小事.网上搜索资料没有找到答案,在很多开发群里面询问了很多人也没有解决问题,最后分析log,反编译看源码才终于有了些眉目,好吧,上代码: try ...

  2. AngularJS and Asp.net MVC

    AngularJS 初印象------对比 Asp.net MVC 之前就早耳闻前端MVC的一些框架,微软自家的Knockout.js,google家的AngularJs,还有Backone.但未曾了 ...

  3. SZU:B54 Dual Palindromes

    Judge Info Memory Limit: 32768KB Case Time Limit: 10000MS Time Limit: 10000MS Judger: Number Only Ju ...

  4. DLL文件的引用

    首先我们先要写一个DLL文件: 我先创建一个win32的DLL工程,在工程中添加了Math.h和Math.cpp文件,具体内容如下: Math.h: #pragma once #include &qu ...

  5. [转]OPENSOLARIS 2009.06 REPOSITORY ISO IMAGES NOW AVAILABLE

    Source: http://hosam.wordpress.com/2009/07/25/opensolaris-2009-06-repository-iso-images-now-availabl ...

  6. Orchard是一个了不起CMS（内容管理系统）

    在这个系列中,我们将共同经历从头开始构建一个Orchard模块的过程! 虽然Orchard是一个了不起CMS(内容管理系统),有着强大的功能和令人振奋的架构,可以无限的扩展,但它可能需要花费一定时间, ...

  7. IE8下提示'console'未定义错误

    在开发的过程中由于调试的原因,在代码中加入console.info("xxxx"),而未进行删除 在IE8下测试该代码所在的页面报错,如下: 需要注意的是,使用console对象查 ...

  8. Fluent Nhibernate code frist简单配置

    Fluent Nhibernate code frist简单配置   前言 在以前的项目开发过程中使用nhibernate做完orm映射工具需要编写大量的xml映射文件,项目过程中往往会因为一个字段等 ...

  9. 持续集成环境（Hudson）搭建

    持续集成环境(Hudson)搭建 这是在公司写的,公司要求用英文,我也没时间翻译了.还请见谅! Hudson是个非常强大持续集成工具,配合svn,maven,sonar,redmine工具就更加完美了 ...

  10. Linux中添加管理员权限问题：xxx is not in the sudoers file. This incident will be reported.

    在各个不同版本的linux中添加拥有管理员权限账户有不同的简便方式. 问题: 今天遇见将新添用户添加到root用户组后,运行sudo仍然提示 ”xxx is not in the sudoers fi ...