zoukankan      html  css  js  c++  java
  • DOM元素大小

    一、偏移量

      偏移量包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定,包括所有内边距、滚动条和边框大小(注意,不包括外边距)。通过下列4个属性可以取得元素的偏移量。

      offsetHeight:元素在垂直方向上占用的空间大小,以像素计。包括元素的高度、(可见的)水平滚动条的高度、上边框高度和下边框高度。

      offsetWidth:元素在水平方向上占用的空间大小,以像素计。包括元素的宽度、(可见的)水平滚动条的宽度、上边框宽度和下边框宽度。

      offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离。

      offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离。

      其中,offsetLeft和offsetTop属性与包含元素有关,包含元素的引用保存在offsetParent属性中。

      ⚠️注意:

      1、所有偏移量属性都是只读的,而且每次访问他们都需要重新计算。

      2、包含元素指带有定位元素(相对定位,绝对定位,固定定位)的父元素,如果父元素不是定位元素,则继续上溯所有祖先元素直到body。

    二、客户区大小

      客户区大小指的是元素内容及其内边距所占据的空间大小。

      clientWidth:元素内容区宽度加上左右内边距宽度。

      clientHeight:元素内容区高度加上上下内边距高度。

      ⚠️注意:

      1、滚动条占用的空间不计算在内。

      2、客户区大小是只读的。

    三、滚动大小

      滚动大小指的是包含滚动内容的元素的大小。

      scrollHeight:在没有滚动条的情况下,元素内容的总高度。

      scrollWidth:在没有滚动条的情况下,元素内容的总宽度。

      scrollLeft:被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。

      scrollTop:被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

    四、确定元素大小

      getBoundingClientRect()方法返回一个矩形对象,包含4个属性:left、top、right和bottom。

  • 相关阅读:
    Sum Root to Leaf Numbers
    Sum Root to Leaf Numbers
    Sort Colors
    Partition List
    Binary Tree Inorder Traversal
    Binary Tree Postorder Traversal
    Remove Duplicates from Sorted List II
    Remove Duplicates from Sorted List
    Search a 2D Matrix
    leetcode221
  • 原文地址:https://www.cnblogs.com/xsnow/p/10901607.html
Copyright © 2011-2022 走看看