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. PHP Fatal error: Undefined class constant 'MYSQL_ATTR_INIT_COMMAND'

    最近用ThinkPHP,给公司布置线上的网站的时候,遇到的一个问题,记录一下. 打开IE浏览器的设置,Internet选项里的高级,将”显示友好的HTTP错误消息“前都勾去掉! 再次刷新,看到的错误是 ...

  2. BZOJ 3531 SDOI2014 旅行 树链剖分+线段树动态开点

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3531 题意概述: 给出一棵N个点的树,树上的每个结点有一个颜色和权值,支持以下四种操作: ...

  3. 并查集——poj1611(入门)

    传送门:The Suspects 并查集水题 #include <iostream> #include <cstdio> #include <algorithm> ...

  4. 会话描述协议(SDP)介绍

    1.SDP的引入 SDP最初用于Mbone(组播骨干网)上的多媒体会议.Mbone 是Internet 的一部分,它的主要特征是对IP组播技术的使用.IP组播技术比较适合实现多方会话. 基于组播的会议 ...

  5. Kernel Mode, User Mode

    之前关于kernel mode,user mode之间的切换,有个问题一直有些疑惑. 一个进程有没有办法,从user mode切换到kernel mode去执行自己的代码.我知道答案肯定是不行,但是为 ...

  6. springMVC笔记二

    第十四章 springmvc快速入门(注解版本) 1)springmvc快速入门(传统版) 步一:创建springmvc-day02这么一个web应用 步二:导入springioc,springweb ...

  7. 【bzoj2007】[Noi2010]海拔 最小割+对偶图+最短路

    题目描述 YT市是一个规划良好的城市,城市被东西向和南北向的主干道划分为n×n个区域.简单起见,可以将YT市看作一个正方形,每一个区域也可看作一个正方形.从而,YT城市中包括(n+1)×(n+1)个交 ...

  8. 计蒜客16492 building(二分线段树/分块)

    题解: 考虑用线段树维护楼的最大值,然后这个问题就很简单了. 每次可以向左二分出比x高的第一个楼a,同理也可以向右二分出另一个楼b,如果a,b都存在,答案就是b-a-1. 注意到二分是可以直接在线段树 ...

  9. Codeforces Round #390 (Div. 2) E(bitset优化)

    题意就是一个给出2个字符矩阵,然后进行匹配,输出每个位置的匹配的结果 (超出的部分循环处理) 一种做法是使用fft,比较难写,所以没有写 这里使用一个暴力的做法,考虑到一共只出现26个字符 所以使用一 ...

  10. 【转】C#获取当前路径7种方法

    webformvar s = System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName; //C盘 IIS路径 var s1 ...