document.body.clientWidth 获取body元素对象的内容可视区域的宽度,即clientWidth=width+padding,不包括滚动条。

document.body.clientHeight 获取body元素对象的内容可视区域的高度,即clientHeight=height+padding,不包括滚动条。

浏览器兼容性 在IE7中,如果给body设置滚动条的话,滚动条是出现在body内部的。所以当给body设置width和height时,在IE7中clientWidth和clientHeight的值是要比其它浏览器中的值小一些的。

document.body.offsetWidth 获取body元素对象的宽度,即offsetWidth=width+padding+border,也可以写成offsetWidth=clientWidth+border。

document.body.offsetHeight 获取body元素对象的高度,即offsetHeight=height+padding+border,也可以写成offsetHeight=clientHeight+border。

浏览器兼容性 在IE7中,如果给body设置滚动条的话,滚动条是出现在body内部的。所以offsetWidth和offsetHeight的值还需要加上滚动条的宽度。当然最终的值和其它浏览器是一样的。

document.body.scrollWidth 获取body元素对象内容的实际宽度,即对象的滚动宽度。

document.body.scrollHeight 获取body元素对象内容的实际高度,即对象的滚动高度。 浏览器兼容性 在FireFox和IE中,其获取的就是body元素对象内部内容的实际宽高。 在Chrome、Safari、Opera中,scrollWidth和scrollHeight获取的是整个页面文档的滚动宽高。

document.body.clientLeft 获取body元素对象的左边框的宽度。

document.body.clientTop 获取body元素对象的上边框的宽度。 浏览器兼容性 各浏览器表现一致。

document.body.offsetLeft 获取body元素对象相对于自身的位置。

document.body.offsetTop 获取body元素对象相对于自身的位置。 浏览器兼容性 在Chrome、Opera、Safari、IE8、IE9和IE10中,工作正常,offsetLeft和offsetTop的值都为0。 在FireFox中,offsetLeft和offsetTop的值为负的body元素的border-width。 在IE7中,offsetLeft和offsetTop指的是body元素对象的边框(不包括边框)到页面文档边缘的距离。

document.body.scrollLeft 获取页面文档向右滚动过的像素数。

document.body.scrollTop 获取页面文档向下滚动过的像素数。 浏览器兼容性 在FireFox、IE8、IE9和IE10中,scrollLeft和scrollTop的值始终为0。 在IE7中,scrollLeft和scrollTop的值为body元素对象最顶端和对象内容的最顶端之间的距离,即滚动条滚过的距离。

JS:body元素对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft的更多相关文章

  1. 一文看懂js中元素的滚动大小(scrollWidth,scrollHeight,scrollTop,scrollLeft)

    滚动大小(scroll dimension) 滚动大小指的是包含滚动内容元素的大小. 以下是与元素滚动内容大小相关的属性: 1. scrollWidth:在没有滚动条的情况下,元素内容的总宽度. 2. ...

  2. clientWidth,offsetWidth,scrollWidth区别

    <html> <head> <title>clientWidth,offsetWidth,scrollWidth区别</title> </head ...

  3. JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义

    JQuery中: width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度: outerWidth()方法用于获得包括内边界(padding)和 ...

  4. JS中关于clientWidth offsetWidth scrollWidth 等的含义

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

  5. js中的clientWidth offsetWidth scrollWidth等的含义

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

  6. JS中关于clientWidth offsetWidth scrollWidth 的区别及意义

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

  7. JS中关于clientWidth offsetWidth scrollWidth 等的含义的详细介绍

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

  8. clientWidth offsetWidth scrollWidth

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

  9. js的元素对象

    元素对象(element对象)        ** 要操作element对象,首先必须要获取到element,                       - 使用document里面相应的方法获取  ...

随机推荐

  1. 复合类型的声明——是int *p还是int* p

    我们先来看一条基本类型的声明语句:int a, b, ... 即一条声明语句由一个数据类型(int)和紧随其后的一个变量名列表(a, b, ...)组成 更通用的描述是:一个基本数据类型和紧随其后的一 ...

  2. [译]如何根据条件从pandas DataFrame中删除不需要的行?

    问题来源:https://stackoverflow.com/questions/13851535/how-to-delete-rows-from-a-pandas-dataframe-based-o ...

  3. 使用github同步网站

    今天刚刚完成了自己的一个小项目,想把他上传到服务器上,想到到我使用的Visual Stdio Code具有git功能,于是想到使用github作为代码仓库来同步代码. 大体步骤分为这几步:创建远程代码 ...

  4. 剑指offer:跳台阶

    目录 题目 解题思路 具体代码 题目 题目链接 剑指offer:跳台阶 题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). ...

  5. 【Python】Python—判断变量的基本类型

    type() >>> type(123)==type(456) True >>> type(123)==int True >>> type('ab ...

  6. 【题解】APIO2007动物园

    首先一眼感受到这题特别的性质……5个?这么小的,感觉就像是状压.脑补了一下,如果没有环的话应该很好做吧……有环怎么办?5真的很小的,随便乱搞肯定也可以.那就放在外面暴力枚举吧.然后正解就出来了. 然而 ...

  7. WIndows 相关知识

    Windows服务 图解WinXP局域网共享设置步骤 Win10如何搭建FTP服务器以实现快速传输文件 强大工具psexec工具用法简介 BIOS和CMOS的区别 系统CLSID简介和小技巧

  8. apache代理服务器配置

    1. 扩展开启,httpd.conf开启一下选项 LoadModule proxy modules/proxy.so LoadModule proxy_connect modules/proxy_co ...

  9. Bash script: report largest InnoDB files

    The following script will report the largest InnoDB tables under the data directory: schema, table & ...

  10. Codeforces Round #348 (VK Cup 2016 Round 2, Div. 2 Edition) A

    A. Little Artem and Presents time limit per test 2 seconds memory limit per test 256 megabytes input ...