Question

我正在尝试使用CSS Grid构建砖石效果，这需要获取元素的原始高度并相应地修改grid-row-end属性。但是，scrollHeight属性不会返回元素的实际高度。

我将React和Bootstrap都使用了最新版本。我尝试了其他属性，例如height，outerHeight，offsetHeight，clientHeight。没有运气。

generateSpans() {
    const spans = [];
    Array.from(this.ref.current.children).forEach(child => {
        // This child has only one child element.
        const subChild = Array.from(child.children)[0];
        const childHeight = subChild.scrollHeight;
        const span = Math.ceil(childHeight / 10);
        spans.push(Math.ceil(span / 2) + 1);
    }); 
    this.setState({ spans });
}

对于高度为216、240的元素，我得到166。对于高度为264的元素，我得到190。对于高度为384的元素，我得到214。任何线索为什么会发生这种情况？

非常感谢。

编辑1：我试图将scrollHeight更改为offsetHeight。结果与上面列出的完全相同。 Here is the image of the elements that I inquire height of, the result, and the actual height.

编辑2：刚刚尝试过window.getComputedStyle。以下是修改后的代码：

generateSpans() {
    const spans = [];
    Array.from(this.ref.current.children).forEach(child => {
        const subChild = Array.from(child.children)[0];
        const childHeight = window.getComputedStyle(subChild).getPropertyValue('height');
        console.log(subChild);
        console.log(childHeight);
        const span = Math.ceil(childHeight / 10);
        spans.push(Math.ceil(span / 2) + 1);
    }); 
    this.setState({ spans });
}

这次的结果是一个字符串。 Here is the image of the elements that I inquire height of, the result, and the actual height.但是它的价值没有什么不同。

scrollHeight的值与元素的实际高度不同。如何获得实际高度？

0 个答案: