如何使用 JavaScript 获取尚不存在的元素的样式？答案

【问题标题】：How can I fetch the style of a not yet existing element using JavaScript?如何使用 JavaScript 获取尚不存在的元素的样式？
【发布时间】：2020-03-25 16:20:46
【问题描述】：

所以，我想获取 <div> 的 top 计算样式并将其放入变量中。但是，<div> 还没有在 DOM 中。稍后将通过 JavaScript 事件将其附加到 DOM（一旦用户触发 .onclick() 事件）。

为此，我尝试了以下方法： let style = getComputedStyle(element).top;

但是，这将不起作用，因为 element 尚未在 DOM 中。如果我尝试这样做，则会出现以下错误：

那么，即使该元素尚未在 DOM 中，我如何获取特定元素的 top 样式？

【问题讨论】：

您可以使用 HTML“隐藏”标签将其添加到 DOM。那就是它不会显示在页面上，但您可以使用它的样式。
我试过了，还是不行，还是报错。我认为一旦点击事件被触发并且元素已被附加到DOM，我只需要通过放置变量来解决这个事实。谢谢你:)

标签： javascript html css dom styles

【解决方案1】：

你不能。您只能在 DOM 中获取元素的计算样式，因为它的计算样式取决于它的位置、周围的内容以及使用的样式。

相反，如果您知道 DOM 元素的特征以及它将在哪里，您可以在相同的位置为它添加一个占位符，使用相同的类等；然后获取它的样式，从中获取top，然后将其删除。如果您在一个序列中执行所有操作而不返回到事件循环，用户将永远不会看到它。

【讨论】：

哦，好吧...我想我只需要解决它..谢谢！