Почему querySelector имеет значение null, хотя имя класса, которое он ищет, встречается 21 раз в HTML? - PullRequest
Новая
       50

Почему querySelector имеет значение null, хотя имя класса, которое он ищет, встречается 21 раз в HTML?

0 голосов
/ 26 мая 2020

Я пытаюсь найти высоту предмета, который у меня есть. Элемент отформатирован следующим образом: 

<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-item div. У меня есть это: 

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 со значением null». Он не должен быть нулевым, мой html имеет 21 div с этим именем класса. Я пытаюсь сделать что-то похожее на руководство по адресу https://w3bits.com/css-grid-masonry/.

...