QA@IT

JavaScriptで文字列の取得

4438 PV

JavaScriptで動的に生成したテーブル内のノードにある文字列を取得しようとしています。

IEだと下記の方法で取得できます。
var lineTitle = document.getElementById("title");
var lineTitleStr = lineTitle.outerText;

しかし、FirefoxだとouterTextをサポートしていないので取得できません。
outerTextをinnerHTMLやvalueとして試しましたが、取得できませんでした。

一番良いのは、IEとFirefoxのどちらでも取得できる方法を教えて頂く事ですが、Firefoxで取得できる方法を教えて頂いても助かります

大変困っています。どうぞ、宜しくお願いします。

この質問に対する回答は締め切られました。

回答

文字列の長さに応じてフォントサイズを縮小したり、省略表示したりできないかと思って調べてみました。
canvasのmeasureText()を使う方法と、DOMのoffsetWidthの値を使う方法があるようです。

canvasを使う方法

 HTML5のcanvasを使いますので、canvas要素に非対応なIE8以前ではexcanvas.jsが必要です。

 IEとexcanvasのバージョンの組み合わせ次第で動かない可能性もあります。

手順:
(1)まずHTML中にcanvasを用意する

Firefox9ではstyleでdisplay:none;としても大丈夫でしたが、IE+excanvasでは駄目だったので、hidden指定のうえ、positionをabsoluteにして浮かせておきます。

(2)幅を測定する処理は以下のように記述します。

function strWidth(str) {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var context = canvas.getContext('2d');
var metrics = context.measureText(str);
return metrics.width;
}
return -1;
}

context.font = でフォントの指定も必要ですね。

DOMのoffsetWidthの値を使う

こちらを参考にしました。→http://d.hatena.ne.jp/Psychs/20070525/1180077269

手順:
(1)まずHTML中に測定に使用するspanを用意する

折り返しが発生すると測定結果が狂うのでwhite-space:nowrap;にした方がいいです。
必要に応じてフォントなどの条件指定も。

(2)幅を測定する処理は以下のように記述します。(jQuery使用してます)

function strWidth(str) {
var e = $("#ruler");
var width = e.text(str).get(0).offsetWidth;
e.empty();
return width;
}

私の環境(Firefox9)ではどちらの方法でも同じ値が取得できました。
最初、違う値が出たので「あれ?」と思ったら、フォントを合わせるのを忘れてました……。

参考記事:http://qiita.com/items/1b3802db80eadf864633

http://www.witdeals.com/pens-pencils/p-2115.html

編集 履歴 (0)
  • 早速の回答をありがとうございます。
    取得の方法を工夫する事で今回の問題を解決しようと思っていたので、javascriptで、outerTextとtextContentの処理を、IEとfirefoxで振り分ける事で対応しました。
    ご丁寧にありがとうございました。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。