元素尺寸

clientWidth[Height]

元素的可视区域大小，计算公式：width[height]+padding(如果有滚动条，要减去滚动条的宽度17px)
文档的可视区域大小会随着浏览器窗口的大小变化而变化，文档可视区域的获取：

document.documentElement.clientWidth;
document.documentElement.clientHeight;

offsetWidth[Height]

元素的占位大小，计算公式：width[height]+padding+border(不包括滚动条)

scrollWidth[Height]

内容的宽高，计算公式：width[height]+padding

如果div里面的内容超过父div，并且设置了overflow:hidden;则可以用scrollHeight获取内容的高度，下面div#inner的scrollHeight的计算公式为：样式高+padding-top

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style type="text/css">
    #inner{
        width:100px;height:100px;border: 1px solid red; overflow: hidden; padding: 10px;
    }
    .content{
        height: 600px;width: 90px; background: red;
    }
</style>
</head>

<body style="height:2000px;">
    <div id="inner" >
        <div class="content">内容</div>
    </div>
    <script>
    var oDiv = document.getElementById('inner');
    console.log(oDiv.scrollHeight);
    </script>
</body>
</html>

scrollTop[Left]

滚动距离。
浏览器滚动距离的获取

document.documentElement.scrollTop;  //非chrome浏览器
document.body.scrollTop;  //只针对chrome浏览器
window.pageYOffset;
posted @ 2015-01-26 23:05  尐肥羊  阅读(166)  评论(1)  编辑  收藏  举报
up