Fatal编程技术网
  • javascript/
  • 如果窗口宽度小于给定值，如何使用JavaScript在Html中隐藏文本，并在'；它大于这个值

如果窗口宽度小于给定值，如何使用JavaScript在Html中隐藏文本，并在'；它大于这个值

javascript html

如果窗口宽度小于给定值，如何使用JavaScript在Html中隐藏文本，并在'；它大于这个值,javascript,html,Javascript,Html,我尝试了window.screen.width方法，但脚本似乎只运行了一次（当页面加载时），我正在寻找一种方法来使用，这样代码就可以一直运行。 下面是我的JavaScript代码： var textinSelected = document.getElementById("selectedText").innerHTML; setInterval(function(){ if (window.screen.width << 1200) { document

我尝试了
window.screen.width
方法，但脚本似乎只运行了一次（当页面加载时），我正在寻找一种方法来使用，这样代码就可以一直运行。
下面是我的JavaScript代码：

var textinSelected = document.getElementById("selectedText").innerHTML;
setInterval(function(){
if (window.screen.width << 1200) {
    document.getElementById("selectedText").innerHTML = "";
  }
else if (window.screen.width >> 1200){
    document.getElementById("selectedText").innerHTML = textinSelected;
  }
});

var textinSelected=document.getElementById（“selectedText”）.innerHTML；
setInterval（函数（）{
如果（window.screen.width>1200）{
document.getElementById（“selectedText”）.innerHTML=textinSelected；
}
});
以下是目标Htmldiv：

 <div class="selected shadow-sm"><p id="selectedText">Catégories</p></div>
分类

您可以使用
窗口
调整事件大小，而不是
设置间隔
。您还应该使用
window.innerWidth
而不是
window.screen.width
window.innerWidth
返回浏览器的视口，而
window.screen.width
返回设备（而不是浏览器）的屏幕大小。 
var textinSelected=document.getElementById（“selectedText”）.innerHTML；
addEventListener（'resize'，function（））{
如果（窗内宽度<1200）{
document.getElementById（“selectedText”）.innerHTML=“”；
}
否则{
document.getElementById（“selectedText”）.innerHTML=textinSelected；
}
});

类别
您可以使用
窗口
调整事件大小，而不是
设置间隔
。您还应该使用
window.innerWidth
而不是
window.screen.width
window.innerWidth
返回浏览器的视口，而
window.screen.width
返回设备（而不是浏览器）的屏幕大小。

var textinSelected=document.getElementById（“selectedText”）.innerHTML；
addEventListener（'resize'，function（））{
如果（窗内宽度<1200）{
document.getElementById（“selectedText”）.innerHTML=“”；
}
否则{
document.getElementById（“selectedText”）.innerHTML=textinSelected；
}
});

有了CSS，你更喜欢做什么


#selectedText {
  display: none;
}

@media screen and (min-width: 1200px) {

  #selectedText {
    display: block;
  }

}


或者使用JavaScript


有了CSS，你更喜欢做什么


#selectedText {
  display: none;
}

@media screen and (min-width: 1200px) {

  #selectedText {
    display: block;
  }

}


或者使用JavaScript


您不必使用Javascript，只需使用CSS即可（我认为使用CSS对您的站点来说更好、更健康）：



文件
分类

：根{
--空白：红色；
}
@介质（最大宽度：1200px）{
：根{
--空白：白色；
}
}
#选定文本{
颜色：var（--空白）；
}

您不必使用Javascript，只需使用CSS即可（我认为使用CSS对您的网站更有益健康）：



文件
分类

：根{
--空白：红色；
}
@介质（最大宽度：1200px）{
：根{
--空白：白色；
}
}
#选定文本{
颜色：var（--空白）；
}

注意and是位移位运算符，不用于比较，比如
。您必须在窗口上收听resize事件，但您应该真正使用CSS媒体查询，而不是使用
首先注意and是位移位运算符，不用于比较，例如
。您必须在窗口上收听resize事件，但您应该真正使用CSS媒体查询，而不是使用
首先有什么意义 
<!DOCTYPE HTML>
<html lang="en">
 <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
 </head>
 <body>
    <div class="selected shadow-sm"><p id="selectedText">Catégories</p></div>
   <style>
:root {
 --blank: red;

 }

 @media (max-width: 1200px) {
   :root {
  
  --blank: white;
 
  
  }
 }

  #selectedText{
  color: var(--blank);
  }
</style>
</body>
</html>