• scrollTop clientTop offsetTop scrollHeight clientHeight clientWidth的差别及使用方法





    这几个属性做滚动时会经经常使用到。现总例如以下:

    首先定义一个div。样式例如以下:

    <style>
    *{ margin:0px; padding:0px;}
    body{ margin:0px; padding:10px; border:solid 10px #69F;}
    .aa{ margin:20px auto 0px; 100px; height:50px; overflow:auto; border:solid 1px #cccccc; padding:0px 10px;}
    </style>


    <script type="text/javascript">
    window.onload = test;
    function test(){
    var aa = document.getElementById("aa");
    //aa.scrollTop = 60;


    //alert(aa.scrollTop);              //假设滚动栏不滚动时为0。比方滚动20,则弹出20
    //alert(document.body.scrollHeight);//整个屏幕的可显示网页的高度。即一屏的高度 666

                    

    //alert(document.body.clientTop); //10   即body的上边框宽度
    //alert(aa.style.top);            //什么也不弹出  ???
    //alert(aa.scrollTop);            //60    假设上面aa.scrollTop不设置为60。即滚动栏不滚动时,弹出0
    //alert(aa.offsetTop);            //40    div偏移顶部窗体的距离 
    //alert(aa.clientTop);            //1     即div的上边框

    //alert(aa.scrollHeight);           //380   div内容的总高度。即不设高度,让内容自适应得到的高度 + padding
    //alert(aa.offsetHeight);          //72     div的高度加上上下padding再加上 border     即height + paading + border
    //alert(aa.clientHeight);         //70      div的高度加上上下padding    即height + padding
    //alert(document.body.clientHeight)  //112  屏幕中显示内容的高度

    //alert(aa.clientWidth);          //103    div的宽度减去滚动栏的宽度再加上左右padding    
    //alert(aa.scrollWidth);       //103        div的宽度减去滚动栏的宽度再加上左右padding ,和 aa.clientWidth一样
    //alert(aa.offsetWidth);      //122        div的宽度加上padding + border   即width + padding + border
    //alert(document.body.clientWidth); //1346   整个屏幕的宽度减去body的左右border  即1366 - 20
    //alert(document.body.offsetWidth); //1366   整个屏幕的宽度

    alert(aa.clientLeft);        //1      即div的左边框
    alert(aa.scrollLeft);        //0  滚动栏没有向右滚动。所以弹出0
    alert(aa.offsetLeft);        //ie和谷歌为622。火狐为612  即ie和谷歌包括body的左边框,而火狐不包括body的左边框。总之


    都是div距窗体左边的距离。


    alert(document.body.clientLeft);  //10  即body的左边框

    }
    </script>




    div.scrollTop:假设上面aa.scrollTop不设置为60,即滚动栏不滚动时,弹出0


    div.offsetTop:div偏移顶部窗体的距离 


    div.clientTop:div的上边框




    div.scrollHeight:div内容的总高度,即不设高度。让内容自适应得到的高度 + padding


    div.offsetHeight:整个div加上上下边框的高度再加上border。

    即整个div的高度。 即height + padding + border


    div.clientHeight:css样式文件中规定的div的高度再加上上下padding。不加上下边框的高度。即height + padding


    document.body.clientHeight:屏幕中显示内容的高度  不加上body的上下边框




    div.clientWidth:div的宽度减去滚动栏的宽度再加上左右padding 


    div.scrollWidth:和div.clientWidth一样。




    div.offsetWidth:div的宽度加上padding + border   即width + padding + border


    document.body.clientWidth:整个屏幕的宽度。即屏幕的宽度的显示分辨率的宽度减去body的左右边框


    document.body.offsetWidth:整个屏幕的宽度。即屏幕的宽度的显示分辨率的宽度。1366




    div.clientLeft:即div的左边框


    div.scrollLeft:滚动栏向右滚动的距离


    div.offsetLeft:div距窗体的左边框,ie和谷歌包括body的左边框。而火狐不包括body的左边框。

    即在火狐中比在ie和谷歌降低body的左边框


    document.body.clientLeft:body的左边框

  • 相关阅读:
    如何显示Mac中文件的路径(path)
    什么样的音符对听起来悦耳?
    如何用iMovie剪辑视频
    【转】基因的故事
    4阶魔方解决方案
    SQ1魔方解决方案
    如何将Wikipedia链接的Unicode编码转成百分号编码
    我喜欢的LaTex编辑器
    react(redux)
    React (高阶组件)
  • 原文地址:https://www.cnblogs.com/gcczhongduan/p/5308261.html
Copyright © 2020-2023  润新知