计算宽度和宽度所选文本的高度(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屋!