zoukankan      html  css  js  c++  java
  • clientHeight ,offsetHeight,style.height,scrollHeight的区别与联系

    style.height 包括元素的滚动条,不包括边框

    clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeight

    offsetHeight 包括元素的滚动条和边框,只有在没有元素的滚动条和边框的情况下,offsetHeight==style.height==clientHeight

    scrollHeight offsetHeight+scrollTop,只有在没有元素的滚动条和边框和滚动时的情况下,offsetHeight==style.height==clientHeight==,offsetHeight==style.height==scrollHeight

    公式是:

    style.height=clientHeight+滚动条宽度;

    offsetHeight=style.height+borderTop+borderBottom;

    scrollHeight=offsetHeight+scrollTop;

    同理: clientWidth,offsetWidthstyle.width,scrollWidth

    演示时营造不同的环境测试(改变eyejs元素的样式)

    1 <div id="eyejs" style="border: solid 10px red;100px;height:100px;overflow:scroll;">
    2 <div style="height:200px;"></div>
    3 </div>
    4 <input type="button" onclick="alert(document.getElementById('eyejs').clientHeight)" value="点击clientHeight" />
    5 <input type="button" onclick="alert(document.getElementById('eyejs').style.height)" value="点击style.height" />
    6 <input type="button" onclick="alert(document.getElementById('eyejs').offsetHeight)" value="点击offsetHeight" />
    7 <input type="button" onclick="alert(document.getElementById('eyejs').scrollHeight)" value="点击scrollHeight" />
     

    学无止境
  • 相关阅读:
    ES6学习之数组扩展
    js三元表达式
    ES6学习之函数扩展
    TS学习之for..of
    TS学习之Symbol
    Visual Studio编译时报错“函数名:重定义;不同的基类型”
    Windows Visual Studio中修改PostgreSQL代码后调试报错
    Windows安装MySQL5.7.17
    289. Game of Life -- In-place计算游戏的下一个状态
    Swift的 convenience && designated init
  • 原文地址:https://www.cnblogs.com/andywenming/p/4510974.html
Copyright © 2011-2022 走看看