javascript scrollWidth/scrollHeight 给出无效的尺寸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7369924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
scrollWidth/scrollHeight give invalid dimensions
提问by Hyman
As stated at https://developer.mozilla.org/en/Determining_the_dimensions_of_elements:
如https://developer.mozilla.org/en/Determining_the_dimensions_of_elements 所述：
If you need to know the actual size of the content, regardless of how much of it is currently visible, you need to use the scrollWidth and scrollHeight properties.
如果您需要知道内容的实际大小，无论当前可见的内容有多少，都需要使用 scrollWidth 和 scrollHeight 属性。
So, I am using the scrollWidth and scrollHeight properties to resize the element to its actual size (jsfiddle).
因此，我使用 scrollWidth 和 scrollHeight 属性将元素的大小调整为其实际大小（jsfiddle）。
HTML:
HTML：
<textarea>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad brrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</textarea>
JavaScript:
JavaScript：
(function ($) {
$(document).ready(function () {
$('textarea').css({
width: $('textarea')[0].scrollWidth,
height: $('textarea')[0].scrollHeight
});
});
})(jQuery);
I would assume that if I set the dimensions to the actual size of the content the element would have no scrollbars as its dimensions would be large enough for the content to not overflow. Right? So it should be the way you see in this image: i.stack.imgur.com/lKxoz.png
我会假设，如果我将尺寸设置为内容的实际大小，元素将没有滚动条，因为它的尺寸足够大，内容不会溢出。对？所以它应该是你在这张图片中看到的样子：i.stack.imgur.com/lKxoz.png
But it doesn't work properly as you can see from the following images:
但它不能正常工作，如下图所示：
IE: i.stack.imgur.com/JXt0e.png
IE：i.stack.imgur.com/JXt0e.png
Chrome: i.stack.imgur.com/emGyG.png
铬：i.stack.imgur.com/emGyG.png
Opera: i.stack.imgur.com/7MAX5.png
歌剧：i.stack.imgur.com/7MAX5.png
My question is what is wrong with the scrollWidth and scrollHeight properties?They give me invalid dimensions!
我的问题是scrollWidth 和 scrollHeight 属性有什么问题？他们给了我无效的尺寸！
回答by Thiemo Müller
The problem is that you're not including the size of the scrollbars. Try setting "overflow" to "hidden" or adding the size of the scrollbars and it works. There are ways to calculate that size, Google will help you. For testing purposes use Chrome on Windows and 17px.
Depending on the context you're using this snippet you might need to reset the size whenever the content changes. You should also give the textarea a fixed width, else the browser will assign whatever it feels like.
问题是您不包括滚动条的大小。尝试将“溢出”设置为“隐藏”或添加滚动条的大小，它可以工作。有多种方法可以计算该大小，Google 会帮助您。出于测试目的，请在 Windows 和 17px 上使用 Chrome。
根据您使用此代码段的上下文，您可能需要在内容更改时重置大小。你还应该给 textarea 一个固定的宽度，否则浏览器会分配任何感觉。
(function ($) {
$(document).ready(function () {
$('textarea').css({
width: $('textarea')[0].scrollWidth+'px',
height: $('textarea')[0].scrollHeight+'px',
overflow: 'hidden'
});
});
})(jQuery);
回答by Mohsen
I feel You took it very complex!
There is an scrollHeightand and scrollWidthproperty that equals to width and height of what is inside an scrollable element. So setting heightand widthof that element to scrollWidthand scrollHeightcan solve the problem.
我感觉你拿的很复杂！有一个scrollHeightandscrollWidth属性等于可滚动元素内的宽度和高度。因此，设置height和width该元素的scrollWidth和scrollHeight可以解决问题。
var textarea = document.getElementsByTagName('textarea')[0];
textarea.style.height = textarea.scrollHeight + 'px';
textarea.style.width = texyarea.scrollWidth + 'px';
Look at fiddle here
看看这里的小提琴
