zoukankan      html  css  js  c++  java
  • javascript 盒子模型

    oDiv.clientWidth---》width+左右padding
    oDiv.clientHeight---》height+上下padding
    oDiv.clientTop---》上边框的高度
    oDiv.clientLeft---》左边框的宽度

    oDiv.offsetWidth---》clientWidth+左右边框的宽度
    oDiv.offsetHeight---》clientHeight+上下边框的高度
    offsetLeft---》当前元素距离父级参照物的左偏移量(从最外面的边框开始算,也就是得到的值不包含我们的边框的宽度)
    offsetTop---》 当前元素距离父级参照物的上偏移量(从最外面的边框开始算,也就是得到的值不包含我们的边框的宽度)

    console.log(oDiv.scrollWidth);
    console.log(oDiv.scrollHeight);
    1)在没有内容溢出的情况下:
    和我们的clientWidth/clientHeight值相等
    2)在有内容溢出的情况下:
    不管是否隐藏了溢出的内容(overflow: hidden),我们的计算是这样处理的:
    scrollWidth 约等于 实际内容的真实宽度(被内容撑开后的宽度)+左padding
    scrollHeight 约等于 实际内容的真实高(被内容撑开后的高度)+上padding


    console.log(document.documentElement.scrollHeight||document.body.scrollHeight);
    在真实项目中我们通常用scrollHeight获取当前HTML页面的总高度(不管有几屏的内容我们都算上)


    document.documentElement.clientHeight||document.body.clientHeight
    只获取当前浏览器一屏的高度


    先写document.documentElement在写document.body,这样就可以完全的兼容了

    摘自“珠峰培训"

  • 相关阅读:
    Echart 动态生成series数据
    转换Excel格式
    .NET接收邮件下载邮件附件——openpop.net
    百度Echart 地图
    mobiscroll 日期问题
    jQuery自动完成插件flexselect
    HTML5 video 连续播放视频
    team foundation server 工具的使用
    实现主成分分析与白化
    白化(预处理步骤)【转】
  • 原文地址:https://www.cnblogs.com/zjx2011/p/4663056.html
Copyright © 2011-2022 走看看