2

テキストが含まれている を呼び出してテキストの幅を確認しようとすると、.width()最初spanは常に間違った値が返されます。.width()次に、もう一度呼び出す理由は、正しい値を取得することです。

を使用してテキストを追加している.append()ので、すぐに幅を取得したいと思います。Chrome から直接ファイルを開くと (インターネットを使用して 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>

これはほとんど機能します。もう1 ステップあります。フォントを完全にプリロードするには、ページ上にロードをトリガーする要素が必要です。空にすることができ、この例はレイアウトに影響しません:

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

私のテストでは、ヘッド内のスクリプトからこれを行うことはできません<body>。タグ内で行う必要があります。

于 2013-05-21T22:19:57.823 に答える