zoukankan      html  css  js  c++  java
  • offsetHeight,clientHeight,scrollHeight,offsetY等属性的理解

    el.offsetHeight = height + padding + border(滚动条是在边框内的,自然也包括在内)
    el.clientHeight = 可视化看到的高度 (就是content的高度)
    el.scrollHeight = 整个元素的高度 ( 包括了clientHeight看不到的那部分,一般就是你css设置的元素高度)

    el.offsetTop = 子元素的外边框到父元素的内边框的垂直距离 (没边框时自然就是content到content的距离)
    el.offsetLeft = 子元素的外边框到父元素的内边框的水平距离距离

    el.scrollTop = 元素被卷去的垂直距离 (就是你看不到的那部分,包括边框遮住的部分,因为遮住的部分你也看不到。结果有小数位)
    在chrome下测试,当我们滑动到底部时,el.scrollHeight === el.clientHeight + Math.ceil(el.scrollTop)
    el.scrollLeft = 元素被卷去的水平距离

    el.clientTop = 就是元素上边框的大小 (不够语义化也不常用)
    el.clientLeft = 元素左边框的大小

    还有几个和mousemove鼠标移动事件相关的属性,也是比较容易混淆的
    e.offsetY = 鼠标距离该元素上面的距离 (不包括边框,在边框上移动时得到的负值)
    e.offsetX = 鼠标距离该元素左边的距离

    e.clientY = 鼠标距离客户端可视区的垂直距离
    e.clientX = 鼠标距离客户端可视区的水平距离

    每次用都记不住,导致我都要google一下,确实容易混淆

  • 相关阅读:
    Hadoop编译源码
    大数据生态体系
    crontab任务调度
    yum概述配置
    如何识别图像边缘
    神经网络入门
    Linux命令locate
    B1299 [LLH邀请赛]巧克力棒 博弈论
    B1090 [SCOI2003]字符串折叠 区间dp
    B1068 [SCOI2007]压缩 区间dp
  • 原文地址:https://www.cnblogs.com/yesyes/p/7663374.html
Copyright © 2011-2022 走看看