使用CSS3列获取稍大的文本文档并使其水平滚动。 这是代码演示.- http://jsfiddle.net/wojtiku/bFKpa/
我使用“document.documentElement.innerText”js代码,获取所有文档文本,但我想获取列文本,怎么办?
答案 0 :(得分: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控制台并查看输出(ctrl + shift + j in chrome)。
修改强>
感谢voithos指出我忽略了什么。考虑到他所说的话,我很确定没有办法准确地做到这一点。但是,这是一个完全黑客,它接近你正在寻找的东西。它使用屏幕外canvas和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]);
}
答案 1 :(得分:0)
我不确定,这是你想要的......
var childElement= document.getElementById("container").getElementsByTagName("p");
for(var i=0;i<childElement.length;i++)
{
alert(childElement[i].innerHTML);
}
以上片段返回para标签的集合,您可以循环并获取html内容。
答案 2 :(得分:0)
没有简单的方法可以做到这一点。这些列不作为单独的DOM元素存在,只不过是文本行。
您可能能够查找列分隔符(例如,通过在文本中插入一堆零大小的内联元素并查看其位置),但它是一个混乱且容易出错的过程