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. 预研报告——MyBatis持久层的demo

    一.预研任务介绍和预研目标 任务介绍: 与 Hibernate 相比, MyBatis 是一个半自动化的持久层框架,以轻量级.效率高.原生代而好评如潮.虽然有在分享会上大致讲解,但是还是重新梳理成文字 ...

  2. laravel 学习随笔(一)

    1.路由参数:路由参数总是通过花括号进行包裹,参数在路由被执行时会被传递到路由的闭包.(路由参数不能包含“-”字符,如有需要可以用“_”代替):

  3. lintcode-96-链表划分

    96-链表划分 给定一个单链表和数值x,划分链表使得所有小于x的节点排在大于等于x的节点之前. 你应该保留两部分内链表节点原有的相对顺序. 样例 给定链表 1->4->3->2-&g ...

  4. Xcode & swift

    swift-apps swift 2018 apps Xcode Swift Playground https://developer.apple.com/download/ https://deve ...

  5. [洛谷P3195][HNOI2008]玩具装箱TOY

    题目大意:有n个物体,大小为$c_i$.把第i个到第j个放到一起,容器的长度为$x=j-i+\sum\limits_{k-i}^{j} c_k$,若长度为x,费用为$(x-L)^2$.费用最小. 题解 ...

  6. 洛谷 P2801 教主的魔法 解题报告

    P2801 教主的魔法 题目描述 教主最近学会了一种神奇的魔法,能够使人长高.于是他准备演示给XMYZ信息组每个英雄看.于是N个英雄们又一次聚集在了一起,这次他们排成了一列,被编号为1.2.--.N. ...

  7. HZOI String STL的正确用法

                                                                      String          3s 512 MB描述硬盘中里面有n ...

  8. webpack3基础知识

    ## 本地化安装webpack ## 1. npm init //npm初始化生成package.json文件 2. npm install --save-dev webpack //安装webpac ...

  9. 我之理解---计时器setTimeout 和clearTimeout

    今天在写个图片切换的问题 有动画滞后的问题,才动手去查setTimeout 和clearTimeout.之前写的图片播放器也有类似的问题,有自动start按钮 和stop按钮, 其他都正常,问题出在每 ...

  10. WEB-INF 有关的目录路径问题总结

    1.资源文件只能放在WebContent下面,如 CSS,JS,image等.放在WEB-INF下引用不了. 2.页面放在WEB-INF目录下面,这样可以限制访问,提高安全性.如JSP,html 3. ...