Как вы можете измерить пространство, которое текст займет в Javascript?

Question

В Javascript у меня есть определенная строка, и я хотел бы как-то измерить, сколько места (в пикселях) она займет в определенном элементе.

По сути, у меня есть элемент, который будет плавать над всем остальным (например, всплывающая подсказка), и мне нужно вручную установить его ширину с помощью Javascript, чтобы он соответствовал тексту внутри.
Я не могу заставить его «автоматически расти», как если бы встроенный элемент рос горизонтально, чтобы содержать его дочерние элементы.

В Windows есть API, которые делают это. Есть ли способ сделать то же самое в Javascript?
Если нет достойного пути, какой подход, по вашему мнению, возможен? (Например, попробуйте разные ширины и проверьте высоту, чтобы убедиться, что она не превышает определенного порога).

Чем меньше «значений пикселей» я могу жестко закодировать в моем JS, тем лучше.

Answer 1

попробуйте

http://blog.mastykarz.nl/measuring-the-length-of-a-string-in-pixels-using-javascript/

Answer 2

Учитывая этот HTML <span>text here</span>, вы должны прочитать атрибут offsetWidth диапазона, который назначается только при добавлении самого элемента в DOM без стиля, который делает его невидимым. Технически это означает, что браузер должен иметь возможность визуально загружать элемент в DOM, чтобы иметь возможность создавать и назначать атрибут offsetWidth.

Примерно так будет работать:

var span = document.createElement("span");
span.appendChild(document.createTextNode("text here"));

span.style = ""; // to make sure the elment doesn't have "display: none" or such
document.body.appendChild(span); // adding it to the DOM

var textWidth = span.offsetWidth;

// be sure to hide or remove the span if you don't need it anymore

Answer 3

Это легко с помощью фреймворка JavaScript. Я использую Prototype в этом примере.

<span id='text' style='border:1px solid #000000;font-size:14px'>hello this is sample text</span>

<script type="text/javascript">
alert($('text').getWidth())
</script>