时间戳

首页 > 解决方案 > 如何获取在内存中创建的控件或框但不在javascript页面上呈现它？

javascript - 如何获取在内存中创建的控件或框但不在javascript页面上呈现它？

问题描述

我正在尝试构建一个解决方案，我需要在其中包含某些文本的标签上进行某些计算。但是，我不想在页面上呈现该标签。一旦进行了计算，就可以丢弃标签。

是否可以在 JavaScript 中在内存中创建这样的标签以进行计算而不将其呈现在页面上？我不想渲染隐藏的控件，因为即使这样也需要一些空间和网页上的修改。

标签： javascripthtml

解决方案

如果要根据元素的渲染大小进行计算，则需要将元素附加到 DOM。这是一种不影响页面布局的方法：

const hiddenLabel = document.createElement("span");

hiddenLabel.innerHTML = "Some Text";

Object.assign(hiddenLabel.style, {
  position: "absolute", // removes element from document flow
  visibility: "hidden", // element invisible, but layout still computed
});

document.body.appendChild(hiddenLabel);

// inspect dimensions of the rendered element.
console.log(hiddenLabel.getBoundingClientRect().width);

例如，如果您尝试根据输入的长度调整输入字段的大小，则此特定示例可能很有用。

推荐阅读