Найти ширину элемента с автоматическим размером

Question

В принципе мне нужна ширина пролета. Сделайте, чтобы использовать несколько пользовательских символов, которые не найдены на клавиатуре. Я создаю собственное поле ввода, используя «div». Каждый символ обернут тегом «span», в котором подключен прослушиватель событий. Это позволит пользователю щелкнуть в любом месте строки и перемещать курсор в позицию после символа, а также позволяет добавлять или удалять символы в середине строки.

Я использую «offsetLeft» и «offsetWidth», чтобы найти правую сторону символа, проблема в том, что при щелчке символа/диапазона «offsetWidth» выключен. Так, например, если я использую 14-пиксельный шрифт, то «М» вернется как 35 пикселей в ширину, если на самом деле это 11 пикселей. И есть несколько вариантов: средний размер, такой как «S», будет возвращаться в 26 пикселей, когда он на самом деле 9. Таким образом, существует разница в размере. Теперь вы можете задаться вопросом, как я нашел фактический размер письма и использовал Firebug. Который, если Firebug может его найти, я бы предположил, что могу, я просто не понял, как это сделать. Поэтому я надеюсь, что кто-то здесь знает.

Я также попытался использовать «getComputedStyle» и «currentStyle, чтобы найти ширину, и он возвращает« auto ». Также попытался getBoundingClientRect(). Width это то же самое, что и offsetWidth, причем разница заключается в том, что он также находит доли пикселя по ширине, так что «М» 35.366668701171875 пикселей в ширину, нечетные

EDIT:.

на основе user1289347 поста я должен отметить, что «offsetWidth» вызывает «offsetLeft», чтобы быть выключен с помощью странствующих суммы

Answer 1

Попробуйте jquery width(), он очень хорошо вычисляет ширину домика каждый раз, когда я его использовал. http://api.jquery.com/width/

И если JQuery это может быть и речи

Создать DIV стиле со следующими стилями. В вашем JavaScript задайте размер шрифта и атрибуты, которые вы пытаетесь измерить, поместите свою строку в DIV, затем прочитайте текущую ширину и высоту DIV. Он будет растягиваться, чтобы соответствовать содержимому, и размер будет находиться в пределах нескольких пикселей от размера строки.

HTML:

<div id="Test"> 
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div> 

CSS:

#Test 
{ 
    position: absolute; 
    visibility: hidden; 
    height: auto; 
    width: auto; 
} 

JavaScript (фрагмент):

var test = document.getElementById("Test"); 
test.style.fontSize = fontSize; 
var height = (test.clientHeight + 1) + "px"; 
var width = (test.clientWidth + 1) + "px"; 

Это создаст отдельный проверяемой DIV с теста, кредит здесь Calculate text width with JavaScript Это много работы, но оно должно дать вам лучшие результаты, действуя за пределами вашей существующей разметки.