У меня есть textarea с текстом Hello World. Я хотел бы получить высоту этого текста.
Я пытался использовать:
var element = document.getElementById('textarea');
var textHeight = element.innerHTML.offsetHeight;
и
var textHeight = element.value.offsetHeight;
Но они не дают номера текста, а высоту элемента textarea.
Создайте элемент span, установите Span innerHTML на "Hello World".
Получите смещение spanHeight.
var span = document.createElement("span");
span.innerHTML="Hello World"; //or whatever string you want.
span.offsetHeight // this is the answer
обратите внимание, что вы должны установить стиль шрифта span в стиле шрифта textarea.
Ваш пример никогда не будет работать, потому что innerHTML и значение - это строки. Строка не определяет offsetWidth.
Если вы хотите получить высоту выделенного текста внутри текстового поля, используйте selectStart/selectionEnd, чтобы найти выделенный текст текстового поля.
element.scrollHeight, вероятно, стоит исследовать.
Если бы я подошел к этому (и я вообще не тестировал это), я бы установил высоту textarea на 1px, чтобы измерить высоту прокрутки, а затем reset высоту textarea.
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
В jQuery нет прокруткиHeight, поэтому ему нужно немного обходного пути. решение будет:
var areaheight=$("textarea#element")[0].scrollHeight;
$("#element").height(areaheight);
или короче:
$("#element").height($("#element")[0].scrollHeight)
Вы можете использовать element.scrollHeight(как сказал Патрик), но ему нужны некоторые исправления (я использую jQuery в примере):
1), если в вашем текстовом поле есть отступы, вам нужно вычесть его (сверху и снизу).
2), если элемент уже установил высоту, вам нужно установить его на ноль (только для измерения, затем установите его обратно, иначе он вернет эту высоту + дополнение)
var h0 = $(element).height(); // backup height
$(this).height(0);
var h = $(this).get(0).scrollHeight - $(this).css('paddingTop').replace('px','')*1 - $(this).css('paddingBottom').replace('px','')*1; // actual text height
$(this).height(h0); // set back original height (or new height using h)
Нет необходимости в дополнительном прогоне с тем же css, что и textarea.
http://www.quirksmode.org/dom/range_intro.html жаль, что я не могу больше помочь.
проблема с вашим примером заключается в том, что встроенный текст не имеет высоты, он имеет только высоту строки, поскольку он должен иметь высоту, которая должна быть в режиме блока отображения, так что все строки добавляются к блок текста, даже тогда все зависит от ширины окна и размера шрифта, семейства шрифтов и т.д.
то, что предлагает ItzWarty, получает выбор текста и помещает его в div, который имеет тот же шрифт и ширину, что и текстовое поле, которое имеет блок отображения и позволяет вам получить его высоту.
Я не уверен, правильно ли я правильно истолковал ваш вопрос, но мне лично нужно было знать точную высоту каждой строки текста. Свойство line-height не имеет правильного значения (например, в Safari оно будет округлено до ближайшего значения при фактической печати текста).
Это мое обходное решение. У вас должен быть следующий код где-то в начале документа.
// set one row in the textarea and get its height
element.rows = 1;
var height1 = parseFloat(window.getComputedStyle(element)["height"]);
// set two rows in the textarea and get its height
element.rows = 2;
var height2 = parseFloat(window.getComputedStyle(element)["height"]);
// Now, the line height should be the difference
var inputLineHeight = height2-height1;
Переменная inputLineHeight должна содержать правильное значение в пикселях.