document.documentElement.clientwidth和document.body.clientWidth的区别

document.documentElement.clientwidth和document.body.clientWidth有什么区别，用的时候有时候返回值一样，有的时候不一样，网上搜了一下还是没看明白  大侠赐教啊

解决方案 »

  1.   

    对于document.body和document.documentElement两个对象的使用规则：1、若网页中含有有了标准声明（即页面加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这行代码，标准声明的存在会对document.body和document.documentElement的属性值有影响）时，则应该使用document.documentElement
    2、若网页中只有<html>而没有上面的一行代码，则JS脚本应该使用document.body如果您仅是想知道怎么用，看完上边就可以了↑，如果您想要对其了解的更详细一些，请继续浏览下面的说明↓：收藏自一位网易网友的博客，解释的比较清楚详细：对于document.compatMode，很多朋友可能都根我一样很少接 触，知道他的存在却不清楚他的用途。其实这个对于我们开发兼容性的web页面还是很有帮助，我们都知道，盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的，在不声明Doctype的情况下，浏览器默认是Quirks Mode。所以为兼容性考虑，我们可能需要获取当前的文档渲染方式。 
    document.compatMode正好派上用场，它有两种可能的返回值：BackCompat和CSS1Compat，对其解释如下： 
    BackCompat Standards-compliant mode is not switched on. (Quirks Mode) 
    CSS1Compat Standards-compliant mode is switched on. (Standards Mode) 
    当文档有了标准声明（<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">）时， document.compatMode 的值就等于 "CSS1compat"， 因此， 我们可以根据 document.compatMode 的值来判断文档是否加了标准声明 
    var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight; 
    当文档有了标准声明时火狐的style.top等等的设置必须加上“px”等单位，否则它不会认。既然已经说道了这，再展开一下。对于火狐： 
    一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。 
    二、offsetTop 只读，而 style.top 可读写。 
    三、如果没有给 HTML 元素指定过 top 样式（即使在css中设定也不行），则 style.top 返回的是空字符串。offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。 
    再说说他们的区别吧： 
    下面这段大家可能都见到过，在网上被转载过很多次，在这我也借用一下: 
    .Kfk428 { display:none; } 
    网页可见区域宽： 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;  scrollHeight: 获取对象的滚动高度。 
    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
    scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
    scrollWidth:获取对象的滚动宽度 
    offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 
    offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
    offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
    event.clientX 相对文档的水平座标 
    event.clientY 相对文档的垂直座标 
    event.offsetX 相对容器的水平坐标 
    event.offsetY 相对容器的垂直坐标 
    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均无关)另外收录其他网友的一些发现：1、当文档有了标准声明，IE6在页面内容超出窗口大小时将宽度属性scrollWidth、clientWidth、offsetWidth都解释为内容实际宽度。比如我们用document.body.clientHeight原本想取得“页面可见区域高度”，可实际上返回的是“页面实际内容高度”。这时，我们可以用document.documentElement代替document.body来获取我们想要的结果，将代码中的document.body替换为document.documentElement，再来看看各浏览器下的实际结果：
    ii 测试结果表明，IE系列浏览器对document.documentElement属性的解释是正确的，其它标准浏览器将offsetHeight解释成 了scrollHeight。火狐和netscape更是把这两个属性调换了过来。不过总的来说各属性都可以有个相应的解释。2、文档有了标准声明时，用document.body.scrollTop会失效，总显示为0，使用document.documentElement.scrollTop，才会获得正确的值。相反，如果不做标准声明的话，document.documentElement.scrollTop反而会显示为0。 本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/fengzhilong1204/archive/2009/12/17/5023013.aspx
      

  2.   

    要看HTML文档 的<!doctype设置, 是作为 XHTML处理的话，
    用document.documentElement取相关size，(此时body并不是DOM的根节点)
    不是设置为 xhtml，就作为传统的html处理，用document.body即可.
    兼容可以这样做：
    var width = document.compatMode=="CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth; 
      

  3.   

    谢谢了，不过我在页面加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这行代码后，弹出的document.documentElement.clientwidth和document.body.clientWidth的值不一样，它们的区别在哪呢
      

  4.   

    上面提到了 document.documentElement 是 html， 而不是body
    具体要看各个浏览器怎么解释了
      

  5.   

    ie6+ ff 都用document.documentElement 
    只有谷歌用document.body要兼容的话只要
    document.documentElement.clientwidth+document.body.clientWidth
    就可以了