zoukankan      html  css  js  c++  java
  • 搞懂offset、client、scroll、screen的区别

    前言

    最近发现对offset、client、scroll几个属性的区别忘了,所以这篇总结一下元素Element和事件对象event中几个属性的区别

    Element

    这些属性都是只读的,还有一个建议是不要频繁读取这些属性,这是一个耗性能的操作。

    属性名 含义
    offsetWidth 元素自身可视宽度加上border的宽度
    offsetHeight height+上下padding+上下border
    offsetTop 如果父元素有定位,则上边框到父级上边框的距离,父元素没定位,则到body顶部的距离
    offsetLeft 如果父元素有定位,则左边框到父级左边框的距离,父元素没定位,则到body左边的距离
    clientWidth width+左右padding
    clientHeight height+上下padding
    clientTop border.top(上边框的宽度)
    clientLeft border.left(左边框的宽度)
    scrollWidth 可视区宽度+被隐藏区域宽度
    scrollHeight 可视区高度+被隐藏区域高度
    scrollTop 元素已滚动的高度
    scrollLeft 元素已滚动的宽度

    Event

    属性名 含义
    clientX/clientY 点击位置距离当前body可视区域的x、y坐标
    screenX/screenY 点击位置距离当前电脑屏幕的x、y坐标
    pageX/pageY 相对于整个页面,包括被卷去的宽高度

    结语

    大概就这些了,冲冲冲!

  • 相关阅读:
    new和base的语法
    js常用代码
    无法识别connectionStrings
    DataTable
    字符串的操作时间格式化
    Facade外观模式(转载cnblogs)
    ArrayList下的循环绑定和循环删除
    自定义属性与事件委托相结合的实例
    泛型 开放类型和构造类型(基础学习)
    C#策略模式 摘自jspcool
  • 原文地址:https://www.cnblogs.com/chenzilin/p/12993105.html
Copyright © 2011-2022 走看看