Question

目标：使用Javascript更改CSS样式表的属性而不是HTML CSS。

当前问题：使用document.getElementById("foo").style.display = "none"会导致HTML文档中的更改删除媒体查询功能

我的网站上有一个按钮，可以在较小的屏幕上更改侧边栏的显示。屏幕尺寸大于768像素时，此按钮不可用。该网站是动态的，因此当屏幕足够小时按钮会显示。单击该按钮时，sidenav（最初设置为display:none）设置为display:block，然后可以再次关闭。

一旦sidenav在屏幕尺寸中关闭＆lt; 768px，并且屏幕增加到>＆gt; 768px，媒体查询不再将显示更改为阻止，因为Javascript更改了HTML，从而覆盖了CSS媒体查询。

下面是代码并将Javascript更改为HTML。

HTML之前：

<div id="sidenav">foo</div>

<!-- button to change sidenav -->
<div id="menu-button" onclick="openCloseNav(this)"></div>

的Javascript

function openCloseNav(x){
    if(x.classList != "change"){
        document.getElementById("sidenav").style.display = "none";
    }
    else{
        document.getElementById("sidenav").style.display = "block";
    }
}

CSS

#sidenav{
    display:none;
}
@media only screen and (min-width: 768px){
    #sidenav{
        display:block
    }
}

HTML后 div id="menu-button" 点击两次

<div id="sidenav" style="display:none">foo</div>

<!-- button to change sidenav -->
<div id="menu-button" onclick="openCloseNav(this)"></div>

我尝试了一些不同的东西，例如尝试在Javascript中检测屏幕宽度，如下所示：

var currentWidth = window.screen.availWidth;

function showSideNav(){
    if (currentWidth >= "768"){
        document.getElementById("sidenav").style.display = "block";
    }
}

无济于事。如果上方的代码段有效，我就不知道将它放在HTML格式的哪个位置。

问题：我可以做些什么来使sidenav即使在点击屏幕尺寸＆gt; menu-button div之后也会显示768px？

Answer 1

尽可能通过添加/删除CSS类来更改样式，而不是影响element.style对象。这不仅使代码更清晰，减少了代码重复，而且还消除了将CSS作为内联样式直接添加到HTML元素时所遇到的问题，这是添加CSS并且难以覆盖的最具体方式。 / p>

您可以使用 element.classList API轻松添加/删除/切换更多CSS类。

这是一个简单的例子：

＆＃13;

document.querySelector("button").addEventListener("click", function(){
  document.getElementById("element1").classList.add("hidden");
  document.getElementById("element2").classList.remove("special"); 
  
  // Just to show that classList modifications don't alter the inline HTML style
  console.log(document.getElementById("element1"), document.getElementById("element2"));
});

＆＃13;

.hidden { display:none; }
.special { background-color:#ff0; color:#800080; }

＆＃13;

<div id="element1">Now you see me...</div>
<div id="element2" class="special">Something else</div>
<button>Click to change styles</button>

＆＃13;

Answer 2

您可以使用控制导航栏的额外属性，这样您就可以独立于CSS使用JavaScript。我不确定我放在这里的CSS是否正确，但我认为你明白了。

编辑我刚刚注意到感谢@Doug你可以改用一个类。

＆＃13;

function openCloseNav(x) {
  if (x.classList != "change") {
    document.getElementById("sidenav").setAttribute("hideme", true);
  } else {
    document.getElementById("sidenav").setAttribute("hideme", false);
  }
}

＆＃13;

#sidenav[hideme=true] {
  display: none;
}

@media only screen and (min-width: 768px) {
  #sidenav {
    display: block
  }
}

＆＃13;

<div id="sidenav">foo</div>

<!-- button to change sidenav -->
<div id="menu-button" onclick="openCloseNav(this)"></div>

＆＃13;

CSS属性在HTML中更改而不是样式表

2 个答案: