前端中与宽高有关的属性

前端中与宽高有关的属性

一、window对象

(一)window.innerHeight

• window.innerHeight ——浏览器窗口的视口（viewport）高度
  • 只读，且没有默认值
  • 包含水平滚动条本身高度
• window.innerWidth ——浏览器窗口的视口（viewport）宽度
  • 只读，且没有默认值
  • 包含垂直滚动条本身宽度

(二)window.outerHeight

• window.outerHeight ——整个浏览器窗口的高度
  • 包括任务栏等在内的整个浏览器窗体
• window.outerWidth——整个浏览器窗口的宽度
  • 包括任务栏等在内

(三)window.pageXOffset

• window.pageXOffset——表示页面滚动的像素值（水平方向）
  • ``window.scrollX` 的别名
• window.pageYOffset——表示页面滚动的像素值（垂直方向）
  • window.scrollY 的别名

(四)window.scrollX

• window.scrollX——返回文档/页面水平方向滚动的像素值
• window.scrollY——返回文档/页面垂直方向滚动的像素值

二、screen对象

(一)screen.availWidth

• screen.availWidth——返回浏览器窗口可占用的水平宽度

• screen.availHeight——返回浏览器窗口可占用的垂直空间

  • 不包含屏幕状态框

    screen.height //864
    screen.availHeight //824

(二)screen.width

• screen.width——返回屏幕的宽度
• screen.height——返回屏幕的高度

三、document对象

(一)document.elementFromPoint()

• document.elementFromPoint()—— 函数返还在特定坐标点下的HTML元素数组

  var elements = document.elementsFromPoint(x, y);

(二)Element.getBoundingClientRect()

• Element.getBoundingClientRect()——返回元素的大小及其相对于视口的位置

  #box {
      background-color: rgb(105, 221, 241);
       200px;
      height: 200px;
      padding: 20px;
      border: 10px solid rgb(152, 238, 149);
      margin: 20px;
    }

  console.log(box.getBoundingClientRect());
  // {
  //   x: 20;
  //   y: 20;
  //    260;
  //   height: 260;
  //   top: 20;
  //   right: 280;
  //   bottom: 280;
  //   left: 20;
  // }

四、元素相关的属性

(一)element.clientLeft

• element.clientLeft——表示的是一个元素左边框的宽度
  • 只读的
  • 内容溢出导致出现垂直滚动条，需要包含滚动条的宽度
  • 不包括左外边距和左内边距
• element.clientTop——表示的是一个元素顶部边框的宽度
  • 只读的
  • 不包括顶部外边距或内边距

(二)element.clientWidth

• element.clientWidth——表示元素内容区域的宽度

  • 包括内边距 padding
  • 不包括边框 border、外边距 margin 和垂直滚动条

• element.clientHeight——表示元素内容区域的高度

  • 包括内边距 padding
  • 不包括边框 border、外边距 margin 和垂直滚动条

  

(三)element.offsetLeft

• element.offsetLeft——表示相对于最近的祖先定位元素的左边界偏移量
  • 只读属性
  • 对块级元素来说，offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相对于 offsetParent 的边界框
• element.offsetTop——表示相对于最近的祖先定位元素的顶部边界偏移量

(四)element.offsetWidth

• element.offsetWidth——返回一个元素的布局宽度
  • 只读属性
  • 包含元素的 content、padding、border以及竖直方向滚动条
• element.offsetHeight——返回一个元素的布局高度

(五)element.scrollWidth

• element.scrollWidth——表示元素内容的全部宽度
  • 只读属性
  • 包括由于overflow溢出而在屏幕上不可见的内容
• element.scrollHeight——表示元素内容的全部高度
  • 包括由于overflow溢出而在屏幕上不可见的内容

(六)element.scrollLeft

• element.scrollLeft——可以读取或设置元素滚动条到元素左边的距离
  • scrollLeft设置为0时，水平滚动条在最左边
• element.scrollTop——可以获取或设置一个元素的内容垂直滚动的像素数
  • 元素的内容没有产生垂直方向的滚动条， scrollTop 值为0

(七)element.scrollTo(x, y)

• element.scrollTo()——可以使界面滚动到给定元素的指定坐标位置

  • 滚动元素内部的滚动条

    element.scrollTo({
      top: 100,
      left: 100,
      behavior: 'smooth'
    });

• element.scrollBy()——可以使元素滚动一段特定距离

五、鼠标相关属性

(一)clientX/clientY

• MouseEvent.clientX ——鼠标指针相对于内部窗口(viewport)的左偏移量
  • 不包括浏览器任务栏
• MouseEvent.clientY ——鼠标指针相对于内部窗口(viewport)的顶部偏移量

(二)offsetX/offsetY

• MouseEvent.offsetX ——鼠标指针相对于目标节点内边位置(padding)的X坐标
  • 点击元素border左上角，offsetX为负值的border-left-width
• MouseEvent.offsetY ——鼠标指针相对于目标节点内边位置的Y坐标

(三)pageX/pageY

• MouseEvent.pageX——鼠标指针相对于整个文档的X坐标
  • 鼠标相对于document的坐标，其会随着页面滚动而改变
• MouseEvent.pageY——鼠标指针相对于整个文档的Y坐标

(四)screenX/screenY

• screenX——鼠标指针相对于全局（屏幕）的X坐标
• screenY——鼠标指针相对于全局（屏幕）的Y坐标

(五)x/y

• MouseEvent.x ——MouseEvent.clientX的别名
• MouseEvent.y——MouseEvent.clientY的别名

(六)layerX/layerY

• MouseEvent.layerX ——其获取的是触发点相对于被点击元素的距离
  • 数值与offsetX/offsetY相同