textarea的scrollHeight和clientHeight是如何计算的？
textarea的scrollHeight和clientHeight是如何计算的？
提问于 2022-01-17 02:07:11
运行此代码段时，您将看到以下内容(至少在Chrome 97.0.4692.71中如此)：
- 在页面加载上，
clientHeight和scrollHeight比1行所需的要多。 - 除非显式设置，否则
line-height是undefined。设置line-height会影响初始clientHeight和scrollHeight值。 - 输入1行中断不会改变
clientHeight或scrollHeight。它们似乎有足够的空间来初始化2行。 - 输入2行中断会像预期的那样增加
scrollHeight，但它并不等于textHeight。 - 输入足够多的字符来包装会导致
scrollHeight增加，但是没有添加到文本中的换行符(也就是说，textHeight不会改变)。
用来得出观察到的clientHeight和scrollHeight值的计算是什么？
const textarea = document.querySelector('textarea');
document.addEventListener('DOMContentLoaded', () => {
resize(textarea);
});
textarea.addEventListener('input', (inputEvent) => {
resize(inputEvent.target);
});
function resize(o) {
const lines = getLines(o);
const fontSize = getCSSIntegerValue(o, 'font-size');
const padding = getCSSIntegerValue(o, 'padding');
const borderWidth = getCSSIntegerValue(o, 'border-width');
const textHeight = fontSize * lines;
console.log('fontSize=%d, lines=%d, padding=%d, borderWidth=%d, textHeight=%d, clientHeight=%d, scrollHeight=%d', fontSize, lines, padding, borderWidth, textHeight, o.clientHeight, o.scrollHeight);
}
function getCSSIntegerValue(o, property) {
const computedValues = window.getComputedStyle(o);
const propertyValue = computedValues.getPropertyValue(property);
return parseInt(propertyValue.replace(/\D/g, ''));
}
function getLines(o) {
const lines = o.value.split(/\r|\r\n|\n/);
return lines.length;
}textarea {
all: unset;
background-color: #ddd;
overflow-y: hidden;
overflow-x: hidden;
overflow-wrap: break-word;
font-size: medium;
}<textarea></textarea>
回答 1
Stack Overflow用户
发布于 2022-01-17 02:29:39
除非定义，否则line-height将使用用户代理样式表(根据MDN，桌面浏览器通常使用1.2 )。有了这些信息，结果应该更有意义。
clientHeight总是2 * line-height。
scrollHeight是line-height * lines。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70735796
复制相关文章
相似问题
腾讯云开发者
