jQuery(js)で文字幅(表示長)を取得するサンプルコード_jquery

今日、テキストの幅を取得するという問題に遭遇しました。長い間探した後、最終的に海外のWebサイトでメソッドを見つけましたが、それを直接使用することはできなかったので、それを修正してプロジェクトで使用することに成功しました。ここでそれを共有します。

まず、body タグの最後にサブタグを追加します。

コードをコピーします コードは次のとおりです。次のように:

test

次に、対応する CSS コードを追加します:

コードをコピーします コードは次のとおりです。

#ruler {
visibility: hidden; space: nowrap;
font-size: 24px ;
}

次に、文字幅を取得する関数を String プロトタイプに直接追加し、次のコードを js に追加します。コード:

コードをコピー コードは次のとおりです:

String.prototype.visualLength = function ()
{
var ルーラー = $("# ルーラー");
ruler[0].offsetWidth;

最後に、テキスト幅を取得する必要がある場所で呼び出します。例:

コードをコピーします

コードは次のとおりです。 var text = "test"; var len = text.visualLength();

主なアイデアは、隠しラベルを追加することです。ラベルに値が割り当てられるたびに、ラベルの長さを取得することでテキストの幅が取得されます。 DOM に追加されたタグのみが長さを取得できることに注意してください。

役に立ったと思われる場合は、ご協力いただければ幸いです、ありがとうございます:)