3

Using CSS3 columns to take a somewhat large text document and make it scroll horizontally. Here is demo of code.- http://jsfiddle.net/wojtiku/bFKpa/

I use "document.documentElement.innerText" js code ,get all document text,but I want to get a column text,How to do ?

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);  
 }

上面的代码片段返回 para 标记的集合，您可以循环并获取 html 内容。

​</p>

于 2012-05-21T04:04:08.273 回答
0

没有简单的方法可以做到这一点。列不作为单独的 DOM 元素存在，不超过文本行。

您也许可以查找分栏符（例如，通过在文本中插入一堆大小为零的内联元素并查看它们的位置），但这将是一个混乱且容易出错的过程。

于 2012-05-21T04:17:31.593 回答