JavaScript：如何在刪除它後在'resize'事件上添加一個類？

-1

我正在添加一個事件監聽器到窗口，以偵聽調整大小事件。基本上我想在瀏覽器寬度低於768px時刪除'center'類，然後當我們高於768px時將其添加回去。JavaScript：如何在刪除它後在'resize'事件上添加一個類？

window.addEventListener('resize', function() { 
    var width = 0, 
     doc = document, 
     div = doc.getElementsByTagName('div'), i; 
    if (window.innerHeight) { 
     width = window.innerWidth; 
    } else if (doc.documentElement && doc.document.documentElement.clientHeight) { 
     width = doc.documentElement.clientWidth; 
    } else if (doc.body) { 
     width = doc.body.clientWidth; 
    } 
    if (width < 768) { 
     for (i = 0; i < div.length; i++) { 
      div[i].classList.remove('center'); 
     } 
    } else { 
     div[i].classList.add('center'); 
    } 
}, false);

它正確刪除它，但檢查控制檯時，我立即得到此錯誤。不知道爲什麼它會記錄該錯誤從一開始...

index.html:591 Uncaught TypeError: Cannot read property 'classList' of undefined(…)

感謝任何幫助！

來源

2016-11-04 Antonio Pavicevac-Ortiz

只是出於好奇，你爲什麼不乾脆使用CSS媒體查詢來做到這一點？ –

爲什麼不在CSS中使用@media查詢？ – TheValyreanGroup

你有'doc.document.documentElement'它應該是'doc.documentElement'和if（window.innerHeight）它應該在哪裏讀取window.innerWidth – amdouglas

你不需要JS，CSS只：

.media { 
 
    background-color: blue; 
 
    } 
 
@media (max-width: 600px) { 
 
    .media { 
 
    background-color: red; 
 
    } 
 
}

<div class="media"> Hello world</div>

codepen

這裏瞭解media queries

來源

2016-11-04 19:58:24

這是要走的路。它消除了如此多的複雜性。 –

謝謝，但如果你只是想改變一個元素，那將是適用的。刪除是我在這種情況下尋找的。 –

你可以做一些像「display：none;」而不是「背景顏色：紅色」 –

你搞砸了你的循環與你如果聲明。

if (width < 768) { 
    for (i = 0; i < div.length; i++) { 
     div[i].classList.remove("center"); 
    } 
    } else { 
     div[i].classList.add("center"); 
    }

應該是：

for (i = 0; i < div.length; i++) { 
    if(width < 768) 
     div[i].classList.remove("center"); 
    } else { 
     div[i].classList.add("center"); 
    } 
}

來源

2016-11-04 20:27:58 amdouglas

JavaScript：如何在刪除它後在'resize'事件上添加一個類？

回答

相關問題