如何根據大小屏幕去除div？

我知道我可以用這個CSS隱藏元素：如何根據大小屏幕去除div？

@media only screen and (max-height: 350px) { 
    .sizeResponsive{ 
     display: none; 
    } 
}

，但我需要刪除元素。

任何想法誰可以根據屏幕大小使用CSS去除div？

來源

2016-07-27 Michael

你不能使用CSS來做到這一點，因爲它不具備影響DOM的能力。只有它顯示的方式可能會受到影響。

使用jQuery，你可以做$(window).height()或$(document).height()（或screen.height如果你喜歡堅持純javascript）來獲得高度。

通過使用var el = $('div.sizeResponsive');或var el = document.querySelector('div.sizeResponsive');獲得股利和從DOM像這樣將其刪除：el.parentElement.removeChild(el);

爲了實現你正在尋找與CSS的效果，你就必須添加一個事件偵聽像這樣：

// Usually it's a good idea to store your eventhandler in a variable so that you can dispose of it at a later time 
var resizeHandler = function() { 
    if (screen.height < 350) { 
     var responsiveDivs = document.querySelectorAll('div.sizeResponsive'); 
     for (i = 0; i < responsiveDivs.length; i++) { 
      responsiveDivs[i].parentElement.removeChild(responsiveDivs[i]); 
     } 
    } 
} 

document.onload(function() { 
    window.addEventListener('resize', resizeHandler); 
}); 

// When you no longer need it 
window.removeEventListener('resize', resizeHandler);

問題依然存在，爲什麼你要刪除元素本身？現在，你正在失去這些元素，如果屏幕大小回到你的閾值允許它們顯示，你將不得不再次添加它們。

您可以將元素存儲在變量中，並在高度再次進入邊界內時重新添加它們，但這對於CSS屬性display: none;解決得很好的問題來說似乎不必要的複雜。

編輯： 無論如何，解決這些小事情有時是有趣的。這裏有一個codepen，沒有任何jQuery，這樣可以防止任何人使用jQuery：http://codepen.io/anon/pen/YWvxwQ

來源

2016-07-27 10:18:38

添加了一個簡單的工作codepen示例，以防萬一實際需要更改DOM –

使用JavaScript或jQuery的這個任務中使用的jQuery JavaScript中screen.width或$(window).width()，並根據你得到的屏幕寬度刪除您所需的元素窗口

計算寬度。

來源

2016-07-27 10:13:41

這不是問題的答案。 OP問「任何想法誰可以根據屏幕大小**使用CSS **刪除div？」說「爲此使用JavaScript」完全忽略了OP的要求。你甚至沒有說*爲什麼* OP應該爲此使用JavaScript。 –

@JamesDonnelly我很想知道你是否真的可以使用「css」來「移除」任何div。請回答，而不是放棄我的。 :) –

不，你不能。我的評論只是指出你沒有努力告訴OP。你只是說「JavaScript可以做到這一點！」這幾乎與通過說「C++可以做到這一點！」來回答C＃問題相提並論。 –

display：none會隱藏它，不會影響佈局的流程，但它仍然會在html源代碼中，所以它會加載頁面，瀏覽器將決定如何處理它。這意味着一個過時的瀏覽器可能無法理解display：none並反正顯示它。

如果你不希望它加載到移動版本，那麼它不應該從服務器發送。或者在頁面加載到非移動瀏覽器後使用js將其添加。這也可以消除過時的瀏覽器顯示它。

請記住，CSS是一種風格而已，它並沒有影響到DOM

來源

2016-07-27 10:20:42

我敢肯定，CSS不能操縱DOM的能力。所以，沒有辦法真正去除元素。

display: none使元素隱藏，因此沒有爲元素分配空間。您也可以考慮使用position: absolute，它從文檔流中刪除元素，並將height設置爲0。

有更多細節的SO問題：How to remove an element from the flow of HTML/CSS?

來源

2016-07-27 10:21:23 berliner

單獨使用CSS，你不能刪除元素，移除元素是非常昂貴的（更昂貴的不是隱藏。），因爲HTML需要重建DOM樹和每個子刪除中的RENDER樹。

我會建議隱藏它，並通過JavaScript禁用其JavaScript功能。

window.addEventListener('resize', function() { 
    if(window.innerHeight > 350) { 
     ... // .style.display = 'none'; 
     ... // disable functionality. 
    } 
});

來源

2016-07-27 10:21:26 Bamieh

如何根據大小屏幕去除div？

回答

相關問題