3

CSS3 列を使用して、やや大きなテキスト ドキュメントを水平方向にスクロールします。ここにコードのデモがあります.- http://jsfiddle.net/wojtiku/bFKpa/

"document.documentElement.innerText" js コードを使用して、すべてのドキュメント テキストを取得しますが、列テキストを取得したいのですが、どうすればよいですか?

4

3 に答える 3

2

各列のルート要素とinnerTextその要素から取得できます。

var elements = document.getElementById("container").getElementsByTagName("p");
for(var i = 0; i < elements.length; ++i) {
    console.log("COLUMN " + i + "\n");
    console.log(elements[i].innerText);
};

フィドル: http://jsfiddle.net/4mHCb/3/

ブラウザの JS コンソールを開いて出力を確認できます (chrome では ctrl+shift+j)。

編集

私が見落としていたことを指摘してくれたvoithosに感謝します。彼が言ったことを考慮に入れると、これを正確に行う方法はないと確信しています。ただし、ここにあなたが探しているものに近い完全なハックがあります. オフスクリーンキャンバスと 2D コンテキストのmesaureTextメソッドを使用します: http://jsfiddle.net/4mHCb/5/

var elements = document.getElementById("container").getElementsByTagName("p");
var g2d = document.createElement("canvas").getContext("2d");
var containerStyle = document.getElementById("container").style;

var columnWidth = 150;
var lineHeight = 18;
var columnHeight = 300;
var linesPerCol = columnHeight / lineHeight;
var results = [];
for(var i = 0; i < elements.length; ++i) {
    var colText = elements[i].innerText;
    var textWidth = g2d.measureText(colText).width;
    var numCols = textWidth / (columnWidth * linesPerCol);

    var charIdx = 0;
    for (var column = 0; column < numCols; ++column) {
       var currString = "";
       var currTextWidth = 0;
       for (; charIdx < colText.length && currTextWidth < columnWidth*linesPerCol;    ++charIdx) {
           currString += colText[charIdx];
           currTextWidth = g2d.measureText(currString).width;
       }
       results.push(currString);
   }
}

for(var column = 0; column < results.length; ++column) {
   console.log("COLUMN: " + column);
   console.log(results[column]);
}

</p>

于 2012-05-21T04:03:29.107 に答える
0

わかりません、これはあなたが取得しようとしているものです..

 var childElement= document.getElementById("container").getElementsByTagName("p");
 for(var i=0;i<childElement.length;i++)
 {
   alert(childElement[i].innerHTML);  
 }

上記のスニペットは、ループして html コンテンツを取得できる para タグのコレクションを返します。

</p>

于 2012-05-21T04:04:08.273 に答える
0

そうする簡単な方法はありません。列は別個の DOM 要素として存在するのではなく、テキスト行と同じように存在しません。

段区切りを探すことはできるかもしれませんが (たとえば、サイズがゼロのインライン要素をテキストに挿入し、それらの位置を調べることによって)、面倒でエラーが発生しやすいプロセスになります。

于 2012-05-21T04:17:31.593 に答える