計算所選文本的寬度和高度（javascript）

Question

我需要使用JavaScript計算所選/突出顯示文本的width和height 。

我使用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 };
}

left和top坐標正確顯示。 要計算寬度和高度，我也需要right和bottom位置。

所以我添加了幾行代碼來查找bottom和right位置（此處可用代碼 - http://jsfiddle.net/pankajparashar/kv2Bp/ ）。 但讓我吃驚，代碼顯示left和中right坐標總是相同的，盡管它們之間有明顯的不同（僅在Firefox測試）。

top和bottom位置沒有問題，因為它們工作正常，這將幫助我計算高度。 但是為了計算寬度，我仍然需要正確的right坐標。

任何人都可以用代碼指出任何缺陷嗎？ 或任何替代方法，使用它我可以計算所選文本的寬度和高度？

Answer 1

這里有一些代碼來獲取選擇的邊界矩形的尺寸。 它與原始代碼非常相似。

演示： 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 };
}

Answer 2

嘗試使用range.getBoundingClientRect而不是range.getClientRects 。

的jsfiddle