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. Redis安装和配置

    1.下载安装redis 在linux服务器上,命令行执行以下命令(cd ./usr local/src 一般源码放在这里(推荐源码安装)) wget http://download.redis.io/ ...

  2. Linux中的SWAP交换分区

    大多数 Linux 在系统安装时都会提醒并建议你划分一个 SWAP 交换分区,如果你是从 Windows 切换到 Linux 的新用户,兴许对这个 SWAP 会感到十分疑惑. SWAP 交换分区到底是 ...

  3. ThinkPHP3.1.3源码分析---php文件压缩zlib.output_compression 和 ob_gzhandler

    问题来源:\ThinkPHP3.1.3_full\ThinkPHP\Lib\Core\App.class.php 中 init()方法      if(C('OUTPUT_ENCODE')){     ...

  4. 参加 Tokyo Westerns / MMA CTF 2nd 2016 经验与感悟 TWCTF 2016 WriteUp

    洒家近期参加了 Tokyo Westerns / MMA CTF 2nd 2016(TWCTF) 比赛,不得不说国际赛的玩法比国内赛更有玩头,有的题给洒家一种一看就知道怎么做,但是做出来还需要洒家拍一 ...

  5. linux线程同步(1)-互斥量

    一.概述                                                   互斥量是线程同步的一种机制,用来保护多线程的共享资源.同一时刻,只允许一个线程对临界区进行 ...

  6. LINUX下NFS系统的安装配置

    准备:NFS系统服务器IP 192.168.135.1 ,NFS共享目录/mnt/NFS 一.安装NFS 查看nfs是否安装 #rpm -qa | grep nfs 若没有则安装nfs包 #yum i ...

  7. AI(Adobe Illustrator)简单入门——骷髅

    成果: 步骤如下: 一.椭圆工具画正圆 按住shift+alt画一个正圆. 二.圆角矩形工具画矩形 用圆角矩形工具画一个矩形,然后全选水平垂直对齐. 三.画眼睛 利用椭圆工具画一只眼睛,然后按住alt ...

  8. 第8章 用户模式下的线程同步（1）_Interlocked系列函数

    8.1 原子访问:Interlocked系列函数(Interlock英文为互锁的意思) (1)原子访问的原理 ①原子访问:指的是一线程在访问某个资源的同时,能够保证没有其他线程会在同一时刻访问该资源. ...

  9. Android SDK和N多Android开发资源

    开发资源 本文收集整理Android开发需要的Android SDK.工具.Android开发教程.Android设计规范,免费的设计素材等. 欢迎大家推荐自己在Android开发过程中用的好用的工具 ...

  10. [转]Asp.net mvc 网站之速度优化 -- 页面缓存

    网站速度优化的一般方法 由于网站最重要的用户体验就是速度,特别是对于电子商务网站而言. 一般网站速度优化会涉及到几个方面: 1. 数据库优化 — 查询字段简历索引,使用数据库连接池和持久化,现在还有种 ...