javascript - 通过 JavaScript 获取文本 block 的尺寸，而不是容器 `getBoundingClientRect` 的大小

Question

我想获取容器内文本的大小。让我们考虑容器具有填充和边框时的一般情况。

问题是 getBoundingClientRect 返回文本的大小加上左边框和填充，以防文本溢出。否则它只返回容器边框的大小。

Answer 1

如果您使用所有相同的文本格式选项创建占位符 div 并找到它的宽度，则可以获得宽度。

例如，我将创建一个类为 .hidden 的 div，它具有与原始 div 相同的属性。

div.container
{
    font-size: 16px;
}

div.hidden
{
    font-size: 16px;
    display: none;
}

然后，使用jQuery，将.container的内容复制到.hidden，并求出.hidden的宽度:

$(function(){

    $("div.container").each(function(){
   
        $("body").append("<div class='hidden'>"+$(this).html()+"</div>");
        var width = $("div.hidden").width();
        $("div.width").html("Actual width: "+width+"px");
        $("div.hidden").remove();
    
    });

});

JSFiddle