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

Question

我正在使用范围来操作选定的文本。我想计算从某人开始选择文本到完成选择的高度。

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

我还尝试收集 mosedown 和 mosueup 位置的位置，但我需要从所选文本的顶部到释放选择的文本底部的准确高度，但情况并非总是如此。

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

Answer 1

这取决于您需要处理哪些浏览器。下面的函数适用于 IE >= 4 以及支持 Range 中的 getClientRects() 的浏览器（Firefox >= 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 的该部分并将其添加到文档中并具有一些疯狂的位置（例如 left：-1000px），您就可以获得该值。

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