0

我正在尝试找到我在这里拥有的物品的高度。该项目的格式如下：

<div class="press-item">
<span class="press-title">MUSIC IS MY RADAR</span>
<span class="press-title">“Like It Never Happened” Review</span>
<img src="http:...jpg">
<span class="press-subtitle">1st May 2020...Empire.</span>
<a href="https://themusic...-review/">Read More</a></div>

其中几个在一个大容器 div 中， class press-blocks。我的 CSS 看起来像这样：

.press-blocks{
    display: grid;
    grid-gap: 2em;
    grid-template-columns: auto auto auto auto;
    grid-auto-rows: 0;
}
.press-item{
    text-align: justify;
}

在 Javascript 中，我试图找到每个单独press-itemdiv 的高度。我有这个：

function buildpress(Object){
                var allItems = document.getElementsByClassName("press-item");

                for(var i = 0; i < allItems.length; i++){
                    resizeItem(allItems[i]);
                }
            }
            function resizeItem(item){
                var grid = document.getElementsByClassName("press-blocks")[0],
                    rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue("grid-row-gap")),
                    rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));

                var rowSpan = Math.ceil((item.querySelector(".press-item").getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));

                item.style.gridRowEnd = "span " + rowSpan;
            }
            buildpress()

当我运行该页面时，它告诉我“无法读取属性 'getBoundingClientRect' of null”。它不应该为空，我的 html 有 21 个具有该类名的 div。我正在尝试做类似于https://w3bits.com/css-grid-masonry/上的教程的事情。

4

0 回答 0