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

【问题标题】：How can I calculate the height of a text selection without changing the DOM如何在不更改 DOM 的情况下计算文本选择的高度
【发布时间】：2011-10-13 20:01:01
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript css dom height range

【解决方案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;
}

【讨论】：

【解决方案2】：

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

【讨论】：

问题询问如何在不更改 DOM 的情况下执行此操作。一个隐藏的 div 正在改变 DOM。
如果要使用文本的单独副本进行一些测量，我相信这样做的方法是将其放在可见的 div 中，但设置位置：绝对左侧：-10000px ;这告诉浏览器将其完全布局，但它实际上不会显示或导致滚动条。
@jfriend00 true，但我认为 OP 的意思是“更改”文本块中的 DOM；也使用display: none 不会显示任何滚动条并且适用于这种情况。
一些浏览器不会在显示的东西上设置高度：无。
@jfriend00 哪些浏览器？我刚刚使用“旧”浏览器进行了测试：jsfiddle.net/jackJoe/Zxb5E 适用于 IE7 + 8、Safari 4、FF 3、Opera 10，所有这些都相当老，他们理解隐藏的高度，虽然并不那么有趣，是事实上，隐藏时的高度是不同的！（FF 3 除外），我的测试获取高度，隐藏 div，获取高度并添加两个段落，这些都是高度缺少的东西，奇怪。

【解决方案3】：

我认为隐藏的 DIV 方法行不通。许多浏览器要么没有高度，要么为像这样隐藏的元素设置高度=0。

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

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

【讨论】：

隐藏一个 div（通过visibility: hidden 甚至display: none 仍然可以通过javascript“看到”，试试吧，我做到了:)）