Question

我正在编写一个单元测试来测试Angular 5指令，该指令使用document.querySelectorAll来选择一些元素。我创建了下面的模拟服务，它返回符合selector条件的div元素。

class MockDocumentService {
  querySelectorAll(selector: string) {
    const doc = document.implementation.createHTMLDocument('');
    doc.open();
    doc.write(`<html><body><div>
    <div MaxHeight="testMaxHeight">some text</div>
    <div style="height:100px" MaxHeight="testMaxHeight">a taller div</div>
    <div MaxHeight="testMaxHeight">some text</div>
    </div></body></html>`);
    doc.close();
    return doc.querySelectorAll(selector);
  }
}

它成功返回元素但是在我的指令中有以下内容：

const elements = documentService.querySelectorAll(selector);
let maxHeight = 0;

for (let i = 0; i < elements.length; i++) {
  maxHeight = (<HTMLElement>elements[i]).offsetHeight > maxHeight ? (<HTMLElement>elements[i]).offsetHeight : maxHeight;
}

最后，问题是，offsetHeight始终为零（请注意，其中一个div元素的style属性将高度设置为100px）。如何正确报告offsetHeight。另请注意，指令代码在实际使用中工作正常。

Answer 1

当元素未在DOM中呈现时，offsetHeight将返回零。

通常，元素的offsetHeight是元素CSS高度的像素度量，包括边框，填充和元素的水平滚动条（，如果存在，如果呈现）。它不包括伪元素的高度，例如：before或：after。

来源：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

您可以尝试这样的事情：

for (let i = 0; i < elements.length; i++) {
  document.body.appendChild(elements[i]);
  maxHeight = elements[i].offsetHeight > maxHeight ? elements[i].offsetHeight : maxHeight;
  document.body.removeChild(elements[i]);
}

使用document.write创建文档时，offsetHeight为零

1 个答案: