笔记

Appearance

大纲

尺寸与定位 ​

元素尺寸与定位 ​

元素尺寸 ​

  • 元素自身尺寸
    • el.offsetHeight : 元素自身高度；包含元素内部高度、垂直内边距、垂直边框、水平滚动条高度(如果存在)，不含元素外边距
    • el.offsetWidth : 元素自身宽度；包含元素内部宽度、水平内边距、水平边框、垂直滚动条高度(如果存在)，不含元素外边距
  • 元素视口尺寸
    • el.clientHeight : 元素视口高度；包含元素内部高度、垂直内边距，不含水平滚动条高度(如果存在)、元素边框、外边距
    • el.clientWidth : 元素视口宽度；包含元素内部宽度、水平内边距，不含垂直滚动条宽度(如果存在)、元素边框、外边距
  • 元素内容尺寸
    • el.scrollHeight : 元素内容高度；包含元素内容高度、垂直内边距、由于内容溢出导致视图中不可见内容的高度，不含元素边框、外边距
    • el.scrollWidth : 元素内容宽度；包含元素内容宽度、水平内边距、由于内容溢出导致视图中不可见内容的宽度，不含元素边框、外边距

元素定位 ​

  • 定位元素
    • el.offsetParent : 元素最近的定位元素
      • 若无定位元素，则为最近的 table 、 table-cell 或根元素(标准模式下为 html ，怪异模式下为 body )
      • 若元素为 display: none ，该值为 null
  • 元素自身(相对定位元素)定位
    • el.offsetTop : 元素相对于其 offsetParent 元素上边界的偏移距离
    • el.offsetLeft : 元素相对于其 offsetParent 元素左边界的偏移距离
  • 元素内容(相对元素本身)定位
    • el.scrollTop : 元素内容垂直滚动的距离，如果该元素没有滚动条则该值为 0
    • el.scrollLeft : 元素内容水平滚动的距离，如果该元素没有滚动条则该值为 0
js
// 获取元素相对文档定位
function getPos(obj) {
  var pos = { left: 0, top: 0 };
  while (obj) {
    pos.left += bhj.offsetLeft;
    pos.top += bhj.offsetTop;
    obj = obj.offsetParent;
  }
  return pos;
}

文档尺寸与滚动 ​

文档渲染模式 ​

  • document.compatMode : 文档渲染模式
    • BackCompat : 怪异模式，该模式下使用 document.body 指代文档
    • CSS1Compat : 标准模式，该模式下使用 document.documentElement 指代文档(该属性指向文档对象的根元素)
  • 注：下面用 doc 指代文档，不同渲染模式下自行替换

文档尺寸 ​

  • 文档自身尺寸
    • doc.offsetHeight : 文档元素高度
    • doc.offsetWidth : 文档元素宽度
  • 文档视口尺寸
    • doc.clientHeight : 文档视口高度
    • doc.clientWidth : 文档视口宽度
  • 文档内容尺寸
    • doc.scrollHeight : 文档内容高度
    • doc.scrollWidth : 文档内容宽度

文档滚动 ​

  • 文档内容(相对文档)滚动
    • doc.scrollTop : 文档内容垂直滚动的距离
    • doc.scrollLeft : 文档内容水平滚动的距离

浏览器尺寸与滚动 ​

浏览器尺寸 ​

  • 浏览器自身尺寸
    • window.outerHeight : 浏览器自身的高度(整个浏览器高度)
    • window.outerWidth : 浏览器自身的宽度(整个浏览器宽度)
  • 浏览器视口尺寸
    • window.innerHeight : 浏览器视口高度(包括水平滚动条高度)，注：视口即用于页面展示的部分
    • window.innerWidth : 浏览器视口宽度(包括垂直滚动条宽度)，注：视口即用于页面展示的部分

浏览器滚动 ​

  • window.scrollY : 文档在垂直方向上滚动的距离
  • window.scrollX : 文档再水平方向上滚动的距离
  • window.pageYOffset : 该值为 window.scrollY 的别名
  • window.pageXOffset : 该值为 window.scrollX 的别名

屏幕尺寸 ​

  • window.screen : 屏幕对象
  • window.screen.height : 屏幕高度
  • window.screen.width : 屏幕宽度
  • window.screenTop : 浏览器 Y 轴相对于屏幕左上角坐标（有的浏览器也可用 screenY）
  • window.screenLeft : 浏览器 X 轴相对于屏幕左上角坐标（有的浏览器也可用 screenX）