Question

我正在尝试获取div中文本行的总数，并且向我建议我可以将div的display属性设置为inline，并且返回的clientRects的数量将等于文本行。但是，我需要在div上使用绝对定位，当我这样做时它不起作用。

var x = document.createElement("div");
x.style.display = "inline";
x.style.whiteSpace = "pre-line";
x.style.position = "absolute";
var y = document.createTextNode("Text \n text");
x.appendChild(y);

而不是2个rects，我得到1：

x.getClientRects（）。length === 1

我有办法解决这个问题吗？

Answer 1

<强>更新

CSS 2.1中有3 positioning schemes

正常流量。在CSS 2.1中，正常流程包括块级框的块格式化，内联级框的内联格式化以及块级和内联级框的相对定位。
浮动。在浮动模型中，首先根据正常流动布置盒子，然后从流动中取出并尽可能向左或向右移动。内容可能会沿着浮动的一侧流动。
绝对定位。在绝对定位模型中，完全从正常流中移除一个框（它对后来的兄弟姐妹没有影响），并为相应的包含块指定一个位置。

Docs says，getClientRects仅适用于内联元素，仅适用于正常流量。其他方案使其阻止或至少将其视为docs says

但是对于块元素，[browser]将只返回一个矩形。

Answer 2

如果设置每个div的类名，那么div在DOM中的位置无关紧要，定位与选择div无关。

将每个div设置为具有相同的类名
使用querySelectorAll从Dom

你可以在这里找到你的小提琴：http://jsfiddle.net/cu5kb/10/

    var textArrayTest = ["Text \n text", "Text \n text \nText \n text", "Text \n text\nText \n text \nText \n text"];


        for (var i = 0; i < textArrayTest.length; i++) {

            var x = document.createElement("div");
            x.style.position = "absolute";
            x.style.left = '0';
            x.style.top = (i * 100) + 'px';
            x.className += 'textDivs';

            x.appendChild(document.createTextNode(textArrayTest[i]));

            document.body.appendChild(x);
        };

 var getLines = function()
{
    var divHeight = this.offsetHeight;
    var lineHeight = parseInt(this.style.lineHeight);
    var lines = divHeight / lineHeight;
}
        setTimeout(function () {

            var processText = function () {

                var textDivs = document.body.querySelectorAll('.textDivs'),
                    msg = '';

                for (var i = 0; i < textDivs.length; i++) {

                    msg +='Number ' + (i + 1) + ' div has ' + getLines.call(textDivs[i]) + ' lines of text.\n\n';
                };

                alert(msg);
            }();

        }, 2000);

为什么绝对定位会影响getClientRects（）

2 个答案: