Question

如https://developer.mozilla.org/en/Determining_the_dimensions_of_elements所述：

如果您需要知道内容的实际大小，无论如何其中大部分是当前可见的，你需要使用scrollWidth和 scrollHeight属性。

所以，我使用scrollWidth和scrollHeight属性将元素大小调整为实际大小（jsfiddle）。

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的：

(function ($) {
    $(document).ready(function () {
        $('textarea').css({ 
            width: $('textarea')[0].scrollWidth, 
            height: $('textarea')[0].scrollHeight 
        });
    });
})(jQuery);

我认为如果我将尺寸设置为内容的实际尺寸，则元素将没有滚动条，因为它的尺寸足够大，内容不会溢出。对？所以它应该是你在这张图片中看到的方式：i.stack.imgur.com/lKxoz.png

但是从下面的图片中可以看出它无法正常工作：

IE ：i.stack.imgur.com/JXt0e.png

Chrome ：i.stack.imgur.com/emGyG.png

Opera ：i.stack.imgur.com/7MAX5.png

我的问题是 scrollWidth和scrollHeight属性出了什么问题？它们给我的尺寸无效！

Answer 1

问题是您没有包含滚动条的大小。尝试将“溢出”设置为“隐藏”或添加滚动条的大小，它可以工作。有办法计算这个大小，谷歌会帮助你。出于测试目的，在Windows和17px上使用Chrome 根据您使用此代码段的上下文，您可能需要在内容更改时重置大小。你还应该给textarea一个固定的宽度，否则浏览器会指定它的感觉。

(function ($) {
    $(document).ready(function () {
        $('textarea').css({
            width: $('textarea')[0].scrollWidth+'px',
            height: $('textarea')[0].scrollHeight+'px',
            overflow: 'hidden'
        });
    });
})(jQuery);

Answer 2

我觉得你把它变得非常复杂！有scrollHeight和scrollWidth属性等于可滚动元素内部的宽度和高度。因此，将该元素的height和width设置为scrollWidth和scrollHeight可以解决问题。

var textarea = document.getElementsByTagName('textarea')[0];
textarea.style.height = textarea.scrollHeight + 'px';
textarea.style.width = texyarea.scrollWidth + 'px';

查看fiddle here

scrollWidth / scrollHeight给出无效的尺寸

2 个答案: