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. ubuntu同时安装qt4.8和qt5.7

    这是ubuntu默认安装(从apt安装)的路径和相关文件,建议编译安装到/opt目录下,使用./configure --prefix=/opt/Qt4.8 /usr/share/qt4 /usr/sh ...

  2. cat,tac,more

    cat VS tac cat是查看文本文件的内容,tac是cat反过来,反向查看文件 $cat 1.txt ls: cannot access ee: No such file or director ...

  3. ARM 汇编寻址方式

    ARM支持9种寻址方式:立即数寻址,寄存器寻址,寄存器偏移寻址,寄存器间接寻址,基址变址寻址,多寄存器寻址,相对寻址,堆栈寻址,块拷贝寻址. 立即数寻址 将数据直接存放的指令中发给CPU,首先由于AR ...

  4. 其他（一）Visual Studio 自动排版快捷键

    自动对齐快捷键为:ctrl+k+d 按快捷键前,请先将需要对齐的代码选中.不选中是不行的.

  5. 【转】【收藏】LINQ学习心得分享--------（二）LINQ语法详解

    原地址:http://blog.csdn.net/xuemoyao/article/details/8053444   通过上一章节的学习,相信大家已经掌握了学习LINQ的前期的准备知识.在这一节里, ...

  6. Visual Studio 代码折叠快捷键（摘要）

    代码编辑器的展开和折叠代码确实很方便和实用.以下是展开代码和折叠代码所用到的快捷键,很常用: Ctrl + M + O: 折叠所有方法 Ctrl + M + M: 折叠或者展开当前方法 Ctrl +  ...

  7. codevs1004四子连棋[BFS 哈希]

    1004 四子连棋   时间限制: 1 s   空间限制: 128000 KB   题目等级 : 黄金 Gold   题目描述 Description 在一个4*4的棋盘上摆放了14颗棋子,其中有7颗 ...

  8. js获取可视区大小和页面大小的兼容性写法

    var getPageSize = function() { var scrW, scrH; if(window.innerHeight && window.scrollMaxY) { ...

  9. Java8 Lambda表达式和流操作如何让你的代码变慢5倍

    原文出处:ImportNew 有许许多多关于 Java 8 中流效率的讨论,但根据 Alex Zhitnitsky 的测试结果显示:坚持使用传统的 Java 编程风格——iterator 和 for- ...

  10. sublime和python

    <转载> 使用 Sublime 工具时报Decode error - output not utf-8解决办法   打开Python.sublime-build文件,并添加"en ...