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。

  • 相关阅读:
    整理ASP.NET MVC 5各种错误请求[401,403,404,500]的拦截及自定义页面处理实例
    Sql Server 创建表添加说明
    c# 去除字符串中重复字符
    WebStorm中常用的快捷键及使用技巧
    git bash中的快捷键
    git bash here 的 ~/.bashrc 配置文件。和 vue/cli 3. 0 的 .vuerc文件(preset )
    右键菜单添加打开CMD选项
    Vue中使用Vue.component定义两个全局组件,用单标签应用组件时,只显示一个组件的问题和 $emit的使用。
    vue和stylus在subline中显示高亮
    stylus入门教程,在webstorm中配置stylus
  • 原文地址:https://www.cnblogs.com/xsnow/p/10901607.html
Copyright © 2011-2022 走看看