zoukankan      html  css  js  c++  java
  • scrollWidth,clientWidth,offsetWidth 三者区别

    样例:
    <div id="div" style="height: 200px; 200px;border:solid 50px red;overflow:auto;padding:50px"> <div id="info" style="height:400px;400px;border:solid 1px blue;"></div> <script> var div=document.getElementById("div"); var ho=div.offsetHeight; var hc=div.clientHeight; console.log(ho,hc); </script>

    1.offsetWidth

    这里写图片描写叙述

    offsetWidth=border+padding+height;
    这里等于: 50+50+200+50+50=400

    注意:offsetWidth不能在display:none的div获得正确值,能够用jquery的outerWidth()正确获得

    2.clientWidth

    这里写图片描写叙述
    clientWidth=padding+height-滚动栏
    这里等于:50+200+50-17=283

    注意:jquery的innerWidth()可不把滚动栏计算进去,可得到结果300

    3.scrollWidth

    这里写图片描写叙述
    scrollWidth=padding+包括内容的全然高度
    这里等于:50+402+50=502

    4.scrollTop

    定义:获取位于元素顶部边界与元素中当前可见内容的最顶端之间的距离
    这里写图片描写叙述

    scrollTop=scrollHeight-clientHeight
    =padding+包括内容的全然高度-(padding+height-滚动栏)
    =包括内容的全然高度-height-滚动栏

    转载自:https://www.cnblogs.com/gccbuaa/p/7387569.html

  • 相关阅读:
    字符串与Unicode码的相互转换
    关于es6中的yield
    ajax请求中的6个全局事件
    用H5上传文件
    类型化数组
    git笔记-9-29
    js正则表达式验证身份证号和密码
    assertThat用法
    java产生随机数的几种方式
    jQuery之Deferred对象详解
  • 原文地址:https://www.cnblogs.com/Hijacku/p/14926717.html
Copyright © 2011-2022 走看看