根据元素是否可见来切换CSS代码的开/关

Question

我正在用HTML和CSS创建一个顶部栏。我添加了CSS，使代码通过flex元素进行响应。它看起来像这样：

@media screen and (max-width: 820px) {
nav.container {
flex-grow: 3;
}
}

<div class="topbar">
<nav class="container">
<div class="text1">Text</div>
</nav>
<nav class="container">
<div class="text2">Text2</div>
</nav>
<nav class="container">
<div class="text3">Text3</div>
</nav>
<nav class="container">
<div class="text4">Text4</div>
<div class="text5">Text5</div>
<!--This is triggered by an external 
Javascript code, it is sometimes visible and sometimes not visible. -->
</nav>
</div>

我现在唯一缺少的是一个代码，当div(Text5(不可见时，它会禁用上面的CSS代码。

编辑：我需要一个函数，它检查是否提供了"；div与类text5"；具有"；显示：无"然后关闭我提供的CSS代码

Answer 1

根据您的编辑，您将不得不这样做。

//This function returns true if the display of all divs with classOfTheDiv is none
function checkIfIsHidden(classOfTheDiv){
let divs =  document.getElementsByClass(idOfTheDiv);
var allHidden = true;
divs.forEach((div)=>{
if(!(div.style.display === "none")){
allHidden = false;
}
})
return allHidden;
}
//This function will activate the media query only if "text5" is not display none
function activateMediaQuery(){
let mediaMatch = window.matchMedia("screen and (max-width: 820px)")
if(!checkIfIsHidden("text5")){    
mediaMatch.addListener(mediaQueryGenerator)
}else{
mediaMatch.removeListener(mediaQueryGenerator)
}
}
//This function generates the media query. You will no longer need the css, so disable it. 
function mediaQueryGenerator(mediaMatch){
if(mediaMatch.matches){
var elements = document.querySelectorAll('.container');
elements.forEach((element)=>{
element.style.flexGrow = "3";
})
}
}

这不是最简单也不是最短的方法，但IMO是最容易理解的。您必须在JS代码的主线程上调用activateMediaQuery()函数，并禁用或注释当前的媒体查询。编辑：我刚刚注意到你没有任何ID。我想你想检查一下同一类的所有div("text5"(。