javascript - 在 JavaScript 中从未知对象创建新实例

Question

我是 Javascript 新手。我面临着不愉快的情况，其中“每个浏览器”对同一件事使用不同的对象类 - DOMRectList(在 Firefox 中)= TextRectangleList(在 IE 中)= ClientRectList(在 Chrome 中)。 所以我尝试编写代码，我想根据适当的classCollection创建新实例，例如nRect，它是特定 ...List 对象的项目。 我尝试了几种方法，但没有任何效果。这是示例:

<style>
div.cont {
    position:absolute;
    top:10px;
    border:3px solid #093;
    height:205px;
    width:100px;
    word-wrap: break-word;
    overflow:hidden;
    font-family:"Times New Roman", Times, serif;
    font-size:12px;
    }
</style>
function MergeClientRects(elID){
    var result = [];
    xRects = document.getElementById(elID).getClientRects(); 
    alert ('ClientRect.constructor is ' + xRects.constructor);
    // Firefox : DOMRectList();
    // IE  :    [object TextRectangleList]
    // Chrome : ClientRectList()
    for (i = 0; i< xRects.length; i++){
        if (xRects[i].top > 5) {
            var nRect = xRects[i].getClass().newInstance(); // wrong, but how should it to be written ???
         // var nRect =new Object.getPrototypeOf(xRects[i]).create(); // wrong too 
            result.push(nRect);
            }
        }
    return result;  
    }


<div id="containter1" class="cont" contentEditable ="true">
<span id="me" style="font-style:italic; font-size:12px;">Donec tempus, nisi a pharetra placerat, diam nisi aliquam elit, a consectetur magna enim sed ligula.  </span>
</div>

<button onclick="MergeClientRects('me')">Process rects</button> 

谢谢

Answer 1

尝试用for..in循环替换for循环；删除 html 内 t rue contentEditable 属性值处的空格。

注意，使用 Element.getBoundingClientRect() 之间返回的值和 Element.getClientRects()相差约 1px 。无法使用 new 运算符创建 Element.getBoundingClientRect() 或 Element.getClientRects() 的新实例。另请参阅CSSOM View Module .

function MergeClientRects(elID) {
  var result = [];
  var xRects; 
  var el = document.getElementById(elID);
  var  xRects = el.getClientRects()[0];
  for (var prop in xRects) {
    if (prop === "top" && xRects[prop] > 5) {
      var nRect = xRects[prop];
      result.push(nRect);
    }
  }
  console.log(result)
  return result;
}

<div id="containter1" contentEditable="true">
  <span id="me" style="font-style:italic; font-size:12px;">Donec tempus, nisi a pharetra placerat, diam nisi aliquam elit, a consectetur magna enim sed ligula.  </span>
</div>

<button onclick="MergeClientRects('me')">Process rects</button>