javascript - 缩短 DOMRect 数组

Question

如何缩短 rects(例如缩短为 1)？

<script>
function rectTest(elID) {
  var rects = document.getElementById(elID).getClientRects();        
  alert(rects.length);  // 7
  rects.length =  1; 
  alert(rects.length);  // 7 ???
} 
</script>

<div id="containter1" contentEditable = true style="...">
  <span id="me">Donec tempus, nisi a pharetra placerat.</span>
</div>

<button onclick="rectTest('me')">rectTest</button>

Answer 1

Element.getClientRects()返回一个 ClientRectList。 ClientRectList 的length 属性不可写，与length property of an array 相对。 .

可以使用 Object.getOwnPropertyDescriptor() 找到属性的可写性.例如，尝试在您的控制台中运行这些命令:

var x = document.body.getClientRects();
Object.getOwnPropertyDescriptor(x.constructor.prototype, 'length');
// Yields: "Object {set: undefined, ..."
// Undefined setter

并将其与:

var x = [1, 2, 3, 4];
Object.getOwnPropertyDescriptor(x.constructor.prototype, 'length');
// Yields: "Object {value: 0, writable: true, ..."
// Writable: true. It's writable.

因此，ClientRectList 不同于数组。那么我们如何更改它以便我们可以像使用数组一样使用它呢？

Array.prototype.slice不带参数调用返回数组的副本。我们可以利用这一点。 (x 持有一个 ClientRectList):

x = Array.prototype.slice.call(x);
// Yields an array of ClientRects

现在您可以像对待普通数组一样对待x:修改长度，调用splice，调用slice，无论您需要做什么。

编码愉快!