Question

我使用Range来操作所选文本。我想计算某人开始选择文字到他们完成位置的高度。

我已经尝试了所选范围的开头和结尾的范围，我可以准确地计算出高度形式，但它会改变DOM并阻止我进行其他范围操作，例如突出显示以前选择的文本。

我也尝试过收集mosedown和mosueup位置的位置，但是我需要一个准确的高度，从所选文本的顶部到选择被释放的文本的底部，并不总是如此。

所以我想知道是否有办法在不改变DOM的情况下计算文本选择的高度？

Answer 1

这取决于您需要处理哪些浏览器。这是一个适用于IE＆gt; = 4的功能以及支持getClientRects()中Range的浏览器（Firefox＆gt; = 4，自2009年以来的WebKit，Opera）。如果你需要支持早期的浏览器，你需要修改DOM，只要你将DOM恢复到以前的状态就可以了。

jsFiddle：http://jsfiddle.net/W84yW/

代码：

function getSelectionHeight() {
    var selHeight = 0;
    if (document.selection && document.selection.type == "Text") {
        var textRange = document.selection.createRange();
        selHeight = textRange.boundingHeight;
    } else if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount > 0) {
            var range = sel.getRangeAt(0);
            if (!range.collapsed && range.getClientRects) {
                var startRange = range.cloneRange();
                startRange.collapse(true);
                var selTop = startRange.getClientRects()[0].top;
                startRange.detach();
                var endRange = range.cloneRange();
                endRange.collapse(false);
                selHeight = endRange.getClientRects()[0].bottom - selTop;
                endRange.detach();
            }
        }
    }
    return selHeight;
}

Answer 2

我会得到所选文本并将其放入具有相同宽度和相同样式的隐藏div中，并获得其高度。

Answer 3

我不认为隐藏的DIV方法会起作用。许多浏览器要么没有高度，要么隐藏那样的高度= 0。

也许如果您克隆了DOM的那部分并将其添加到具有一些疯狂位置的文档中（如左图：-1000px），您可以获得该值。

无论如何，如果Range对象不为您提供此数据，我认为您必须在使用变通方法获得一致结果方面遇到问题。

如何在不更改DOM的情况下计算文本选择的高度

3 个答案: