2

当我尝试通过调用文本所在的文本来检查某些文本的宽度时.width()，span一开始我总是得到一个错误的值。那么为什么我.width()再次打电话，我得到了正确的价值。

我正在添加文本，.append()然后我想立即获得它的宽度。当我直接通过 Chrome 打开我的文件（不使用 Internet 访问 Dropbox.com）时，它在 99% 的时间内正确获取了宽度值。这可能是加载问题吗？

这是一个示例： https ://dl.dropboxusercontent.com/u/98788053/School/test.html

<script>
  $(document).ready(function() {
    $("body").append("<span id=\"element\">Text to measure</span>");
    $("body").append("<div id=\"thewidth\"></div>");
    $("body").append("<input type=\"button\" value=\"Try again\" onclick=\"getWidth();\">");
    getWidth();
  });
  function getWidth()
  {
    $("#thewidth").html($("#element").width()+"px");
  }
</script>
4

1 回答 1

1

jsFiddle Demo

document.ready和之间有区别window.onload，主要是document.ready因为 DOM 在技术上已经准备好，所以 jQuery 会在图像完全加载（或自定义字体）之前触发。

对于这种情况，我建议你试试这个：

<script>
window.onload = function(){
  $("body").append("<span id=\"element\">Text to measure</span>");
  $("body").append("<div id=\"thewidth\"></div>");
  $("body").append("<input type=\"button\" value=\"Try again\" onclick=\"getWidth();\">");
  getWidth();
};
function getWidth()
{
  $("#thewidth").html($("#element").width()+"px");
}
</script>

这几乎可以工作。还有一步。为了完全预加载字体，您需要在页面上有一个元素来触发加载。它可以是空的，这个例子不会影响你的布局：

<span style="font-family: JennaSue;visibility:hidden;"></span>

根据我的测试，你不能从头部的脚本中做到这一点，它必须在<body>标签内完成。

于 2013-05-21T22:19:57.823 回答