元素中的几何属性

举半个栗子
317 阅读3分钟

元素大小和滚动中比较重要的API

元素的大小

<div id="example">
  ...Text...
</div>
<style>
  #example {
    width: 300px;
    height: 200px;
    border: 25px solid #E8C48F;
    padding: 20px;
    overflow: auto;
  }
</style>

元素的大小.png

注意，上图中没有margin，因为他们不是元素本身的一部分，并且没有什么特殊的属性。

注意，虽然在代码中我们设置内容的大小为300px，但是请仔细看，在这里我们多了一个滚动条，所以内容(content width)是284px。如果没有滚动条，那么内容的宽度将是300px。(不同的设备或者浏览器，滚动条的大小是不确定的)

几何属性

几何属性.png

offsetPartent

offsetParent 是最接近的祖先（ancestor），在浏览器渲染期间，它被用于计算坐标。

最近的祖先为下列之一：

  1. CSS 定位的（position 为 absolute，relative 或 fixed），
  2. 或 <td>，<th>，<table>，
  3. 或 <body>。

属性 offsetLeft/offsetTop 提供相对于 offsetParent 左上角的 x/y 坐标。

有以下几种情况下， offsetParent 的值为 null：

  1. 对于未显示的元素（display:none 或者不在文档中）。
  2. 对于 <body> 与 <html>。
  3. 对于带有 position:fixed 的元素。

offsetLeft / offsetTop

//style:  
body {
      border: 1px solid pink;
    }
    ul {
      width: 500px;
      height: 500px;
      margin-left: 20px;
      border: 20px solid red;
      overflow: auto;
    }
​
//html
<ul class="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>

  • offsetLeft / offsetTop

    offsetLeft 该元素左border的距离到html的距离(距离左边页面偏离的距离)

    offsetTop 该元素上border的距离到html的距离(距离左边页面偏离的距离)

    //script
const list = document.querySelector(".list");
​
console.log(list.offsetLeft+ "左", list.offsetTop+ "上");
// 29左 --list本身的margin-left + body的border + body的margin
// 25上 -- list本身的margin-top +body的border +body的margin

  • offsetWidth / offsetHeight

    //script
const list = document.querySelector(".list");
​
console.log(list.offsetWidth+ "宽", list.offsetHeight+ "高");
// 580宽 --list本身左border到右border之间的距离（包括border）
// 540高 -- list本身上border到下border之间的距离（包括border）

  • clientTop / clientLeft

    const list = document.querySelector(".list");
​
console.log(list.clientTop , list.clientLeft);
// 20宽 --list本身上边框的高度
// 20高 -- list本身左边框的宽度

  • 新加样式
​
li {
      list-style: none;
      width: 200px;
      height: 400px;
    }

  • clientWidth / clientHeight

    const list = document.querySelector(".list");
​
console.log(list.clientWidth  , list.clientHeight);
//  --list本身  border以内  的宽度（不算滚动条）
//  -- list本身 border 以内 的宽度（不算滚动条）

    当没有padding的时候，可以使用这两个API计算出内容区域的大小

  • scrollWidth / scrollHeight

    const list = document.querySelector(".list");
​
console.log(list.scrollWidth   , list.scrollHeight);
//  --list本身  border以内  的宽度（不算滚动条）,因为横向没有滚动条所以相当于clientWidth 
//  -- list中的所有内容（包括被隐藏的）的高度

  • scrollLeft / scrollTop

    const list = document.querySelector(".list");
​
console.log(list.scrollLeft    , list.scrollTop);
​
list.onscroll = function() {
    console.log(this.scrollTop);
}
​
// 在list中滚动条横向滑动的距离(这里没有横向滚动条，所以为0)
​
// 在list中滚动条纵向滑动的距离，点击事件中的scrollTop值，随着滚动条滑动距离的改变，它的值改变

总结

元素具有以下几何属性：

  • offsetParent — 是最接近的 CSS 定位的祖先，或者是 td，th，table，body。

  • offsetLeft/offsetTop — 是相对于 offsetParent 的左上角边缘的坐标。

  • offsetWidth/offsetHeight — 元素的“外部” width/height，边框（border）尺寸计算在内。

  • clientLeft/clientTop — 从元素左上角外角到左上角内角的距离。对于从左到右显示内容的操作系统来说，它们始终是左侧/顶部 border 的宽度。而对于从右到左显示内容的操作系统来说，垂直滚动条在左边，所以 clientLeft 也包括滚动条的宽度。

  • clientWidth/clientHeight — 内容的 width/height，包括 padding，但不包括滚动条（scrollbar）。

  • scrollWidth/scrollHeight — 内容的 width/height，就像 clientWidth/clientHeight 一样，但还包括元素的滚动出的不可见的部分。

  • scrollLeft/scrollTop — 从元素的左上角开始，滚动出元素的上半部分的 width/height。

除了 scrollLeft/scrollTop 外，所有属性都是只读的。如果我们修改 scrollLeft/scrollTop，浏览器会滚动对应的元素。

                                                                  -------------------- 持续更新的第三天
avatar
文章
阅读
粉丝