Question

我知道我可以使用这个css隐藏元素：

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

但我需要删除元素。

任何想法我可以使用CSS根据屏幕大小删除div吗？

Answer 1

您无法使用CSS执行此操作，因为它无法影响DOM。只有显示的方式才会受到影响。

使用jQuery，你可以$(window).height()或$(document).height()（或screen.height，如果你更喜欢坚持使用普通的javascript）来获得高度。

使用var el = $('div.sizeResponsive');或var el = document.querySelector('div.sizeResponsive');获取div并将其从DOM中删除，如下所示：el.parentElement.removeChild(el);

为了达到你想要的效果，你必须像这样添加一个eventlistener：

// 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;解决的问题，这似乎不必要地复杂。

修改无论如何，有时候解决这些小事也很有趣。这是一个没有任何jQuery的代码工具，以防任何人参与其中：http://codepen.io/anon/pen/YWvxwQ

Answer 2

使用javascript或jquery执行此任务

使用javascript中的screen.width或jquery中的$(window).width()计算窗口的宽度，并根据您获得的屏幕宽度删除所需的元素。

Answer 3

display：none将使其隐藏并且不会影响布局的流程，但是它仍然会在html源代码中，因此它将加载页面，浏览器将决定如何处理它。这意味着过时的浏览器可能无法理解display：none并且无论如何都要显示它。

如果您不希望它加载到移动版本，则不应从服务器发送。或者在页面加载到非移动浏览器后使用js添加它。这也可以消除过时的浏览器显示它。

请记住，CSS仅适用于样式，它无法影响DOM

Answer 4

我很确定css无法操纵DOM。所以，没有办法真正删除元素。

display: none使元素隐藏，因此没有为元素分配空间。您还可以考虑使用position: absolute，从文档流中删除元素，并将height设置为0。

有一个更详细的问题：How to remove an element from the flow of HTML/CSS?

Answer 5

您不能单独使用css删除元素，删除元素非常昂贵（比隐藏元素更昂贵。）因为HTML需要在每次子删除时重建DOM树和RENDER树。

我建议隐藏它并通过javascript禁用其javascript功能。

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

如何根据大小屏幕删除div？

5 个答案: