在JavaScript中测量文本大小

在JavaScript中测量文本大小,javascript,html,css,Javascript,Html,Css,我想测量JavaScript中文本的大小。到目前为止,这并不困难,因为我可以简单地将一个临时的不可见div放入DOM树中,并检查offsetWidth和offsetHeight。问题是,我想在DOM准备好之前完成这项工作。这是一个存根: <html> <head> <script type="text/javascript"> var text = "Hello world"; var fontFamily = "Arial";

我想测量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>

var text=“你好,世界”;
var fontfaliam=“Arial”;
var-fontSize=12;
变量大小=measureText(文本、字体大小、字体系列);
函数measureText(文本、fontSize、fontFamily)
{
//执行我!
}      

再次强调:我知道当DOM(或body)发出准备就绪的信号时,如何异步执行。但我想在标题中同步执行,如上面的存根所示。你知道我怎样才能做到这一点吗?我目前的观点是这是不可能的,但可能有人有一个疯狂的想法。

对不起,但没有疯狂的想法。当DOM还没有准备好时,就不可能向它附加一个节点,因此就不可能在您想要的时刻做您想要做的事情


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

您不必等到整个dom准备就绪,只需等待所需的部分即可

将脚本移动到内部
。现在
document.body
已经存在,所以您可以
document.body.insertBefore(myspan,document.body.firstChild)
。(但不要
appendChild
,否则您将在解析器所在的位置上放置一个元素,这通常会破坏IE。)

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

可能的重复?