document.documentElement document.body区别

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>documentElement body</title>

<style type="text/css">
*{margin:0;padding:0;}
.box{width:1960px;height:2000px;margin:0 auto;background:#CCC;}
</style>
</head>
<body>

<div class="box"></div>

<script type="text/javascript">

function getAttr(a) {
    return "documentElement: " + document.documentElement[a] +"\n  document.body: " + document.body[a];
}

/** 可视区域的宽高 **/
//alert(getAttr("clientHeight"));   // 1030 0
//alert(getAttr("clientWidth"));    // 1200 1184

/** 可视区域的宽高(包括边框) **/
//alert(getAttr("offsetHeight"));   // 8 0
//alert(getAttr("offsetWidth"));    // 1200 1184

/** 页面正文全文的宽和高 **/
//alert(getAttr("scrollHeight"));   // 1130 0
//alert(getAttr("scrollWidth"));    // 1200 1184

/** 网页被卷去的宽和高 **/
window.onscroll = function(){
    /*
    console.log(getAttr("scrollTop"));      // FF n 0 chrome 0 n
    console.log(getAttr("scrollLeft"));     // FF n 0 chrome 0 n
    */
    console.log(getAttr("scrollHeight"));    // 2000 2000
    console.log(getAttr("scrollWidth"));     // 1183 1183
}


</script>

</body>
</html>

你可能感兴趣的:(JavaScript)