clientWidth是对象看到的宽度(不含边线,即border)
scrollWidth是对象实际内容的宽度(若无padding,那就是边框之间距离,如有padding,就是左padding和右padding之间距离)。
offsetWidth是指对象自身的宽度,整型,单位像素(含边线,如滚动条的占用的宽,值会随着内容的输入而不断改变)。

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

易混淆点:

clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。 
clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。 
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。 
x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。 
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。

document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
以上主要指IE之中,FireFox差异如下:
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

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

网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);

网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;

网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;

网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;

屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;

屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;

浏览器中如何获取想要的offsetwidth、、、clientwidth、、offsetheight、、、clientheight。。。的更多相关文章

  1. javascript 中 offsetWidth,clientWidth;offsetHeight,clientHeight的区别

    javascript 中 offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变 clientWidth.offsetWidth.clientHeight区别IE6.0.FF ...

  2. 4.在浏览器中解析XML

    要在浏览器中解析获取XML数据,一般只需经过两个步骤:第一,将XML文档.XML字符串转化成XMLDoc对象.第二,使用JS操作XMLDoc对象. 3.1 将XML文档或XML字符串转化成XMLDoc ...

  3. JavaScript问题——在浏览器中的offsetLeft/offsetWidth等属性是什么?

    原文链接http://www.cnblogs.com/xiaohuochai/p/5828369.html https://blog.csdn.net/u012532033/article/detai ...

  4. js获取控件位置以及不同浏览器中的差别

    js获取控件位置(坐标位置)在不同浏览器中的差别. //获取坐标位置 function getpos(e) { var t=e.offsetTop; var l=e.offsetLeft; var h ...

  5. 浏览器中用JavaScript获取剪切板中的文件

    本文转自我的个人网站  , 原文地址:http://www.zoucz.com/blog/2016/01/29/get-file-from-clipboard/  ,欢迎前往交流讨论 在网页上编辑内容 ...

  6. JS Date当前时间:获取日期时间方法在各浏览器中的差异

    转自:http://www.feiesoft.com/00047/<script type="text/javascript"> // JS Date当前时间获取方法在 ...

  7. jquery 获取元素在浏览器中的绝对位置

    代码详解 1,获取对象(自定义调整打开新窗口参照元素) var obj = $("#oButton"); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗口就会根椐按钮的位置进行调 ...

  8. js 如何在浏览器中获取当前位置的经纬度

    这个有一定的误差哈,具体的误差是多少,有兴趣的朋友可以去测试下 直接上代码 index.html页面代码: <html> <head lang="en"> ...

  9. 获取元素在浏览器中的绝对位置(从jquery1.8中抠出来)

    <style> html,body{margin:0;padding:0;} .d1{margin-left:40px;background:red;width:2000px;height ...

随机推荐

  1. 黑马Stream流学习 Stream流 函数式接口 Lambda表达式 方法引用

  2. JSON对象 JSON字符串 JSON数组

    JSON对象: var str2 = { "name" :  "andy", "gender" : "man" , &q ...

  3. exec 和 eval

    exec exec语句用来执行储存在字符串或文件中的Python语句, 我们可以运行一个包含Python语句的字符串 >>> exec "print 'Hello Pyth ...

  4. Git本地分支与远程分支关联

    当clone完版本库,切换到开发分支后,使用git pull -r 拉取并合并分支之后会出现一下提示: $ git pull -rFrom ssh://192.168.1.226:29418/etha ...

  5. oracle 数据库 存储过程

    destinct(去除重复行), to_char(转换自符串), to_date(日期格式函数), substr(截取自符串), lower(将字母转换为小写), upper(将字母转换为小写), t ...

  6. ecshop的商品列表输出中多出一条空记录

    这个是ECSHOP的一个BUG, 在模板中显示商品列表的位置,加一句{if $goods}判断商品存在才显示: {foreach from=$goods_list item=goods} {if $g ...

  7. nodejs下express+ejs环境搭建

    nodejs下express+ejs环境搭建   分类: Nodejs 1.进入需要创建项目的目录    cd F:\nodeCode     2.创建一个带ejs模板工程,工程名为haha    e ...

  8. 洛谷P2827 蚯蚓(单调队列)

    题意 初始时有$n$个蚯蚓,每个长度为$a[i]$ 有$m$个时间,每个时间点找出长度最大的蚯蚓,把它切成两段,分别为$a[i] * p$和$a[i] - a[i] * p$,除这两段外其他的长度都加 ...

  9. 谈谈我理解的Http缓存机制

    前几天看到老铁们分享的面经,谈到 http 缓存机制的问题,痛下决心,一口气研究个明白,分享给大家. 前端的发展越来越迅速,能做的事情越来越多,承担的责任越来越重,通过了解 http 缓存机制,可以帮 ...

  10. 洛谷 P1276 校门外的树(增强版)

    题目描述 校门外马路上本来从编号0到L,每一编号的位置都有1棵树.有砍树者每次从编号A到B处连续砍掉每1棵树,就连树苗也不放过(记 0 A B ,含A和B):幸运的是还有植树者每次从编号C到D 中凡是 ...