从javascript中的未知对象创建新实例

making the new instance from unknown Object in javascript

本文关键字：新实例 实例 创建 对象 javascript 未知      更新时间：2023-09-26

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

<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>

感谢

尝试用

for..in循环代替for循环;删除html t rue contentEditable属性值处的空格。

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

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>

相关文章：