在 JavaScript 中测量文本大小
Posted
技术标签:
【中文标题】在 JavaScript 中测量文本大小【英文标题】：Measure text size in 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（或主体）发出信号表明它已准备好时异步执行此操作。但我想在标题中同步执行，如上面的存根所示。有什么想法可以做到这一点吗？我目前的观点是这是不可能的，但也许有人有一个疯狂的想法。
【问题讨论】：
可能重复？ ***.com/questions/118241/… 【参考方案1】：您不必等到整个 DOM 准备就绪，只需您需要的部分即可。
将脚本移至 <body> 内部。现在document.body 存在，所以你可以document.body.insertBefore(myspan, document.body.firstChild)。 （但不要appendChild，否则您将在解析器所在的位置放置一个元素，这通常会破坏 IE。）
可能有更复杂的解决方法（可能使用画布和measureText()？），但这将是迄今为止最简单的。
【讨论】：
【参考方案2】：我很抱歉，但没有疯狂的想法。当 DOM 未准备好时，不可能向其追加节点，因此不可能在您想要的那一刻做您想做的事情。
存在并告诉您 dom 已准备就绪的较早事件是 DOMContentLoaded 事件，它在不同的浏览器实现中具有其他名称。
【讨论】：
以上是关于在 JavaScript 中测量文本大小的主要内容，如果未能解决你的问题，请参考以下文章