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. C#学习笔记-icon托盘图标的简单知识

    在做整个类似QQ的毕业设计中,有一个小图标把我给难了一阵子,就是托盘小图标

  2. jquery.roundabout.js实现3D图片层叠旋转木马切换

    最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js. 兼容性如图: html结构代码: <div id="featured-area& ...

  3. AC日记——行程长度编码 openjudge 1.7 32

    32:行程长度编码 总时间限制:  1000ms 内存限制:  65536kB 描述 在数据压缩中,一个常用的途径是行程长度压缩.对于一个待压缩的字符串而言,我们可以依次记录每个字符及重复的次数.这种 ...

  4. lock关键字只不过是C#提供的语法糖

    lock关键字只不过是C#提供的语法糖, 最终使用的还是Monitor类. Monitor类的Enter方法要求传入的参数不为null, 否则会有ArgumentNullException excep ...

  5. Flex4 vs Flex3: Repeater vs DataGroup

    repeaters太老土了!如果你过去使用过它,你会发出这种感概.现在,我们终于要摆脱它了.Repeaters不仅有沉重的组件,而且接合使用很不方便.那么,Flex 4中有什么可以帮助我们吗?Data ...

  6. $(window).load(function() {})和$(document).ready(function(){})的区别

    JavaScript 中的以下代码 : Window.onload = function (){// 代码 }  等价于  Jquery 代码如下: $(window).load(function ( ...

  7. [No000039]操作系统Operating Systems用户级线程User Threads

    多进程是操作系统的基本图像 是否可以资源不动而切换指令序列? 进程 = 资源 + 指令执行序列 线程: 保留了并发的优点,避免了进程切换代价 实质就是映射表不变而PC 指针变 多个执行序列+ 一个地址 ...

  8. [No000019]不想背单词？看看游戏能否帮你

  9. 虚拟机 centos设置代理上网

    假设我们要设置代理为 IP:PORT 1.网页上网 网页上网设置代理很简单,在firefox浏览器下 Edit-->>Preferences-->>Advanced--> ...

  10. eclipse大括号高亮显示---颜色很淡，改为显眼的颜色

    window -> preferences -> java(or c++)-> editor -> matching brackets highight, color改为红色