offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变

IE6.0、FF1.06+：
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
offsetWidth = width
offsetHeight = height

clientWidth是对象看到的宽度（不含边线,即border）
scrollWidth是对象实际内容的宽度（若无padding，那就是边框之间距离，如有padding，就是左padding和右padding之间距离）

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置（如果父元素已经定位则是相对于父元素，如果父元素未定位则是相对于body）
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

js中各种宽度高度总结的更多相关文章

  1. JS中各种宽度距离小结

    js中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离. 1.名词解释 screen:屏幕.这一类取到的是关于屏幕的宽度和距离,与浏览器无关,应该 ...

  2. Js中的各种高度问题

    一.屏幕宽高相关 屏幕高度就是你的整个屏幕高度(开机会亮的那片区域的高度),相关的其他高度划分很简单,就是以任务栏为分界线从而分为两部分. screen.height :屏幕高度. screen.wi ...

  3. 关于JS中获取浏览器高度和宽度值的多种方法(多浏览器)

    三种浏览器获取值方法 IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 ...

  4. Js 中一系列宽度和高度的学习

    在学习元素一系列宽度和高度之前,我们先来看一个平时开发中几乎不会遇到的问题,那就是html文档声明<!DOCTYPE html> 确实会对元素的宽高产生影响.几乎不会遇到,是因为我们在写h ...

  5. JS中各种宽度、高度、位置、距离总结

    1.window.screen 浏览器与屏幕的距离,screenX(screenLeft),screenY(screenTop) 2.window.scrollTo(x,y) 将纵向滚动条移动到相对于 ...

  6. js中获取窗口高度的方法

    取窗口滚动条滚动高度 function getScrollTop() { var scrollTop=0; if(document.documentElement&&document. ...

  7. js获取页面宽度高度及屏幕分辨率

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  8. 20190430-screen、client、offset、scroll等JS中各种宽度距离

    参考文献: JavaScript概念之screen/client/offset/scroll/inner/avail的width/left

  9. js中高度与宽度的获取

    JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...

随机推荐

  1. mysqli,Fatal error

    <?php //mysql数据库类-mysqli版 //2014/6/13 class mysqlidb{ public $dbhost; public $dbuser; public $dbp ...

  2. android 滑动滚动条调节音量

    利用滚动条滑动控制音量: 定义: private SeekBar mseekBarvolume: 以下实现代码: //调节音量--begin------------------------- //音量 ...

  3. linux基础-基本命令的讲解(1-7单元）

    基本命令的讲解 主要内容介绍 1.LINUX操作系统安装及初始化配置(熟悉):2.LINUX操作系统目录组成结构及文件级增删改查操作(重点):3.LINUX操作系统用户.权限管理(重点):4.开源软件 ...

  4. poj 2278 DNASequnce AC自动机

    地址:http://poj.org/problem?id=2778 题目: DNA Sequence Time Limit: 1000MS   Memory Limit: 65536K Total S ...

  5. jquery实现输入框聚焦，键盘上下键选择城市

    在最近有个项目中 需要实现当文本框聚焦的时候,可以键盘上下键选择内容,按enter键的时候,把内容传到输入框中,如图所示: 实现代码如下: /** *输入框聚焦,键盘上下键选择城市 */ ;(func ...

  6. Android中事件传递机制的总结

    事件传递虽然算不上某个单独的知识点,但是在实际项目开发中肯定会碰到,如果不明白其中的原理,那在设计各种滑动效果时就会感到很困惑. 关于事件的传递,我们可能会有以下疑问: 事件是如何传递的 事件是如何处 ...

  7. Vijos1019 补丁VS错误[最短路 状态压缩]

      描述 错误就是人们所说的Bug.用户在使用软件时总是希望其错误越少越好,最好是没有错误的.但是推出一个没有错误的软件几乎不可能,所以很多软件公司都在疯狂地发放补丁(有时这种补丁甚至是收费的).T公 ...

  8. BZOJ2763[JLOI2011]飞行路线 [分层图最短路]

    2763: [JLOI2011]飞行路线 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 2523  Solved: 946[Submit][Statu ...

  9. Linux混杂设备驱动学习

    Linux混杂设备是字符设备的一类,主要是混杂设备拥有相同的主设备号(10),但是次设备号是不同的.所有的混杂设备行程一个链表,对设备访问时内核更据次设备号查找到相应的混杂设备. 混杂设备用struc ...

  10. 网络流－最大流问题 ISAP 算法解释（转自Renfei Song's Blog）

    网络流-最大流问题 ISAP 算法解释 August 7, 2013 / 编程指南 ISAP 是图论求最大流的算法之一,它很好的平衡了运行时间和程序复杂度之间的关系,因此非常常用. 约定 我们使用邻接 ...