使用JavaScript删除屏幕大小低于某个像素的div

Question

我是编码的新手。 我知道这可以通过css完成，但是想通过使用JavaScript来实现。 我有一个div标签，并希望不在630px屏幕尺寸下显示它。 我搜索了这个网站并在另一个问题中找到了这个JavaScript代码，我喜欢它：

if( window.innerWidth > 630 ) {
//Your Code
}

但是，由于我是新手，我不熟悉如何在我的PHP代码中插入它以及在哪里插入div所以它只适用于630px以上的屏幕。

Answer 1

这是一种在屏幕宽度小于700px时隐藏div的方法

 function myFunction(x) { if (x.matches) { // If media query matches document.getElementById("divIWantedToHide").style.visibility = "hidden"; } else { document.getElementById("divIWantedToHide").style.visibility = "visible"; } } var x = window.matchMedia("(max-width: 700px)") myFunction(x) // Call listener function at run time x.addListener(myFunction) 

 <div id="divIWantedToHide"> tset </div> 

小提琴

就个人而言，我建议你使用CSS来获得更精确的媒体查询。

 @media only screen and (max-width: 700px) { #divIWantedToHide { display: none; } } 

 <div id="divIWantedToHide"> tset </div> 

小提琴

Answer 2

这更像是一个event问题：

在基本级别，这是您可以通过resize event切换的方式：

 var el = document.getElementById("yes"); //get the element node //target resize event window.onresize = function(){ //this will check everytime a resize happens if(window.innerWidth > 630) { //if width is still bigger than 630, keep the element visible el.style.display = "block"; //exit the funtion return; } //At this point, the width is less than or equals to 630, so hide the element el.style.display = "none"; } 

 <div id="yes"> Yey! I am visible </div>