计算宽度和宽度所选文本的高度（javascript） [英] Calculate width & height of the selected text (javascript)

问题描述

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

I need to calculate the width and the height of the selected/highlighted text using JavaScript.

我使用Tim Down编写的以下代码作为起点，

I am using the following code written by Tim Down, as the starting point,

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 };
}

左& ; 顶部坐标正确显示。计算宽度和宽度高度，我需要正确& 底部的位置。

The left & the top co-ordinates are being displayed correctly. To calculate the width & the height, I need the right & the bottom positions as well.

所以我添加了几行代码来找到底部& 正确职位（此处提供的代码 - http：// jsfiddle达网络/ pankajparashar / kv2Bp / ）。但令我惊讶的是，代码显示 left & 右坐标始终相同，即使它们之间存在明显差异（仅在firefox中测试）。

So I added few lines of code to find the bottom & the right positions (Code available here - http://jsfiddle.net/pankajparashar/kv2Bp/). But to my surprise, the code displays the left & the right co-ordinates always the same, even though there is visible difference between them (tested only in firefox).

top & 底部位置，因为它们工作正常，这将帮助我计算高度。但是要计算宽度，我仍然需要正确的正确的坐标。

There is no problem with the top & the bottom positions, as they are working perfectly, which will help me calculate the height. But to calculate the width, I would still need the correct right co-ordinate.

任何人都可以指出任何瑕疵用代码？或任何替代方法，使用它我可以计算宽度&所选文本的高度？

Can anybody point any flaws with the code? or any alternate approach, using which I can calculate the width & the height of the selected text?

推荐答案

这里有一些代码来获取选区边界矩形的尺寸。它与原始代码非常相似。

Here's some code to get the dimensions of the selection's bounding rectangle. It's pretty similar to the original code.

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

这篇关于计算宽度和宽度所选文本的高度（javascript）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！