在 JavaScript 中测量文本大小答案

【问题标题】：Measure text size in JavaScript在 JavaScript 中测量文本大小
【发布时间】：2010-05-18 11:17:21
【问题描述】：

我想在 JavaScript 中测量文本的大小。到目前为止，这并不难，因为我可以简单地将一个临时不可见的 div 放入 DOM 树中并检查 offsetWidth 和 offsetHeight。问题是，我想在 DOM 准备好之前执行此操作。这是一个存根：

<html>
  <head>
    <script type="text/javascript">

    var text = "Hello world";
    var fontFamily = "Arial";
    var fontSize = 12;

    var size = measureText(text, fontSize, fontFamily);

    function measureText(text, fontSize, fontFamily)
    {
        // TODO Implement me!
    }      

    </script>
  </head>
  <body>
  </body>
</html>

再说一遍：我知道如何在 DOM（或主体）发出信号表明它已准备好时异步执行此操作。但我想在标题中同步执行，如上面的存根所示。有什么想法可以做到这一点吗？我目前的观点是这是不可能的，但也许有人有一个疯狂的想法。

【问题讨论】：

可能重复？ stackoverflow.com/questions/118241/…

标签： javascript html css

【解决方案1】：

您不必等到整个 DOM 准备就绪，只需您需要的部分即可。

将脚本移至 <body> 内部。现在document.body 存在，所以你可以document.body.insertBefore(myspan, document.body.firstChild)。（但不要appendChild，否则您将在解析器所在的位置放置一个元素，这通常会破坏 IE。）

可能有更复杂的解决方法（可能使用画布和measureText()？），但这将是迄今为止最简单的。

【讨论】：

【解决方案2】：

我很抱歉，但没有疯狂的想法。当 DOM 未准备好时，不可能向其追加节点，因此不可能在您想要的那一刻做您想做的事情。

存在并告诉您 dom 已准备就绪的较早事件是 DOMContentLoaded 事件，它在不同的浏览器实现中具有其他名称。

【讨论】：