為什么這么說element.getBoundingClientRect is not a function？我真的不知道該怎么辦。
這是我的JS：
const elementsFadeIn = document.querySelectorAll(".fade-in");
window.addEventListener("scroll", fadeIn);
function fadeIn() {
for (i in elementsFadeIn) {
let element = elementsFadeIn[i];
let viewElement = element.getBoundingClientRect().top - window.innerHeight 20;
if (viewElement < 0) {
element.classList.add("view-element");
}
else {
element.classList.remove("view-element");
}
}
}
和我的 css 代碼：
.fade-in {
transform: translateY(50px) translateZ(0);
transition-delay: 0.7s;
transition: 1s;
opacity: 0;
}
.view-element{
opacity: 1;
transform: translateY(0px) rotate(0deg) translateZ(0);
}
uj5u.com熱心網友回復：
試試這個：
function fadeIn() {
const elementsToFade = document.querySelectorAll(".fade-in");
elementsToFade.forEach(element => {
let viewElement = element.getBoundingClientRect().top - window.innerHeight 20;
if (viewElement < 0) {
element.classList.add("view-element");
}
else {
element.classList.remove("view-element");
}
})
}
uj5u.com熱心網友回復：
問題是for ... in ...回圈遍歷enumerable物件的所有屬性。在NodeList您querySelectorAll的回報對于每個元素包含數字鍵但也包含屬性item，keys，values，entries，forEach，和length。
但是這些附加屬性不是 HTMLElements，因此，它們沒有 method getBoundingClientRect。
看看你自己：
const items = document.querySelectorAll('.item');
for (const item in items) {
console.log('item: ', item);
}<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>相反，您想使用for ... of ...回圈。
const items = document.querySelectorAll('.item');
for (const item of items) {
console.log('item: ', item);
}<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/382342.html
標籤：javascript dom