计算所选文本的宽度和高度（JavaScript）

Question

计算所选文本的宽度和高度（JavaScript）

14

我需要使用JavaScript计算所选/突出显示文本的宽度和高度。

我正在使用由Tim Down编写的以下代码作为起点：

function getSelectionCoords() {
    var sel = document.selection, range;
    var x = 0, y = 0;
    if (sel) {
        if (sel.type != "Control") {
            range = sel.createRange();
            range.collapse(true);
            x = range.boundingLeft;
            y = range.boundingTop;
        }
    } else if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0).cloneRange();
            if (range.getClientRects) {
                range.collapse(true);
                var rect = range.getClientRects()[0];
                x = rect.left;
                y = rect.top;
            }
        }
    }
    return { x: x, y: y };
}

左上角的坐标已经正确显示了，为了计算宽度和高度，我还需要右下角的位置。

所以我添加了几行代码来寻找右下角的位置（可在此处查看代码-http://jsfiddle.net/pankajparashar/kv2Bp/）。但令我惊讶的是，尽管它们之间有可见的差异（仅在Firefox中测试），代码始终显示左和右的坐标相同。

顶部和底部的位置没有问题，因为它们工作得很好，这将帮助我计算高度。但是要计算宽度，我仍然需要正确的右坐标。

有人能指出代码中的任何缺陷吗？或者是否有任何其他方法，可以使用该方法计算所选文本的宽度和高度？

- Pankaj Parashar

2个回答

2

尝试使用 range.getBoundingClientRect 替代 range.getClientRects。

JSFiddle

- Igor Shastin

很好。由于某些原因，在IE8中它无法工作，但在Firefox中可以工作。 - Pankaj Parashar

Fiddle 结果显示 404。 - yckart

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tim Down · Accepted Answer

以下是获取所选文本边框尺寸的代码，与原始代码非常相似。

演示：http://jsfiddle.net/UFkjy/

function getSelectionDimensions() {
    var sel = document.selection, range;
    var width = 0, height = 0;
    if (sel) {
        if (sel.type != "Control") {
            range = sel.createRange();
            width = range.boundingWidth;
            height = range.boundingHeight;
        }
    } else if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0).cloneRange();
            if (range.getBoundingClientRect) {
                var rect = range.getBoundingClientRect();
                width = rect.right - rect.left;
                height = rect.bottom - rect.top;
            }
        }
    }
    return { width: width , height: height };
}