javascript - scrollWidth/scrollHeight 给出无效尺寸

Question

如 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 属性将元素的大小调整为其实际大小 ( 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

歌剧:i.stack.imgur.com/7MAX5.png

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

Answer 1

问题是您没有包括滚动条的大小。尝试将“溢出”设置为“隐藏”或添加滚动条的大小，它会起作用。有多种方法可以计算该大小，Google 会帮助您。出于测试目的，请在 Windows 和 17px 上使用 Chrome。
根据您使用此代码段的上下文，您可能需要在内容更改时重置大小。您还应该给文本区域一个固定的宽度，否则浏览器会分配任何感觉。

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