您的位置: 首页  >  IT文章  >  height clientHeight scrollHeight offsetHeight的大致区别

height clientHeight scrollHeight offsetHeight的大致区别

分类: IT文章 • 2022-09-02 08:34:10

这主要是针对火狐浏览器来讲的：

height:就是div的高度，就是style中设置的高度；在chrome中clientHeight是包含padding的，offsetHeight和clientHeight差不多，而scrollHeight则是滚动条滚动的高度，

可以用这个例子来查看区别：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style >
        #a{
            height:100px;
            width:100px;
            overflow:auto;
            margin:20px;
            padding:20px;

        }
    </style>
    <script>
        window.onload = function () {
            var a = document.getElementById("a");
            a.onmouseover = function () {
                alert(getStyle(a,'height'));
                alert(a.clientHeight);
                alert(a.offsetHeight);
                alert(a.scrollHeight);
            }

        }
        function getStyle(obj,attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else{
                return getComputedStyle(obj,false)[attr];
            }
        }
    </script>
</head>
<body>
<div class="div" id="a">
发生的飞洒发射发的说法是飞洒的范德萨发水电费我发生地方发士大夫撒旦飞洒地方撒发生法撒旦法师打发说法是否违法违法
</div>
</body>
</html>
View Code

clientHeight:一般情况下和height是一样的，如果div有滚动条，在没有padding的情况下clientHeight = height - 滚动条的高度；

var w= document.documentElement.clientWidth
      || document.body.clientWidth;
var h= document.documentElement.clientHeight
      || document.body.clientHeight;

scrollHeight:就是clientHeight + border + 滚动条的高度；其实也可以理解为height + border;//height是不包含border和padding的，

var w=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
   || document.body.scrollHeight;

offsetHeight:在火狐浏览器中offsetHeight是和scrollHeight一样的

var w= document.documentElement.offsetWidth
    || document.body.offsetWidth;
var h= document.documentElement.offsetHeight
    || document.body.offsetHeight;

height clientHeight scrollHeight offsetHeight的大致区别

相关推荐