Ändern Sie automatisch CSS über JS an einem bestimmten Haltepunkt

Question

Ich bin ein responsive Navigation daher habe ich eine Schaltfläche, die das Styling der div ändert #navigation über Javascript. (Umschalten zwischen display: none; und display: block;. Auf kleinen Bildschirmen es funktioniert perfekt. Allerdings, wenn ich zeigen und die Navigation auf der einem kleinen Bildschirm auszublenden und die Größe des Fensters, nachdem es die Navigation noch verborgen ist.

Gibt es eine Möglichkeit zu Ändern Sie die CSS automatisch, wenn das Fenster eine bestimmte Größe hat

Hier ist der Code, den ich verwende (übrigens: Ich bin neu in Javascript) Wieder: Sehen Sie, was passiert, wenn Sie das Fenster kleiner, öffnen und schließen Sie die Navigation und ändern Sie die Größe des Fensters erneut Die Navigation ist (nicht wie gewünscht) immer noch verborgen: http://codepen.io/HannesDev/pen/grjdqK

---

HTML:

<div class="btn-Nav">Navigation</div> 
<nav id="nav-hor" role="navigation"> 
<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
</ul> 
</nav><!-- #site-navigation --> 

CSS:

html{ 
    background: lime; 
} 
/* The Button */ 
.btn-Nav{ 
    border: 2px solid grey; 
    cursor: pointer; 

} 
/* The button changes to the greyed out closed area on the right */ 
.btn-Nav_open{ 
    position: fixed; 
    margin-left: 80vw; 
    left: 0; 
    top: 0; 
    width: 20vw; 
    height: 100vh; 
    background-color: black; 
    color: white; 
    opacity: .2; 
    padding: .2em; 
    text-align: center; 
    font-size: 3em; 
} 

/* The Navigation on small screens */ 
#nav-hor{ 
    display: none; 
    position: fixed; 
    overflow-y: scroll; 
    top: 0; 
    width: 80vw; 
    height: 100vh; 
    background-color: white; 
    z-index: 999; 
    border-right: 1px solid grey 
} 


@media (min-width: 50em) { 
    html{ 
    background: red; 
    } 
    /* Don't show the button on bigger screens */ 
    .btn-Nav{ 
    display: none; 
    } 

/* The Navigation for bigger screens */ 
    #nav-hor { 
    /* Clean up */ 
    display: flex; 
    position: relative; 
    overflow: visible; 
    width: 100%; 
    height: auto; 

} 

JS:

window.onload = function(){ 
    document.querySelector('.btn-Nav').onclick = function(){ 
    // closed 
     if(this.className.match('btn-Nav btn-Nav_open')) { 
      this.className = 'btn-Nav'; 
      document.getElementsByClassName("btn-Nav")[0].innerHTML = "Navigation"; 
      document.getElementById('nav-hor').style.display = "none"; 
      document.body.style.overflow = "auto"; 

     } 
     // open 
     else { 
      this.className = 'btn-Nav btn-Nav_open'; 

      document.getElementsByClassName("btn-Nav")[0].innerHTML = "×"; 
      document.getElementById('nav-hor').style.display = "block"; 
      document.body.style.overflow = "hidden"; 
     } 
    }; 
}; 

Answer 1

Gibt es eine Möglichkeit die CSS automatisch zu ändern, wenn das Fenster eine bestimmte Größe hat ?

Absolut, aber Sie brauchen Javascript nicht, um es zu tun. CSS bietet so genannte Medienabfragen, mit denen Sie die Stile von Elementen basierend auf bestimmten Bedingungen ändern können. Für Ihren speziellen Fall etwas entlang der Linien von

@media only screen and (max-width: 500px) { 
    #navigation { 
     display: block; 
    } 
} 

Dadurch wird die Anzeige des #navigation Elements ändert nur zu blockieren, wenn das Browserfenster kleiner als 500px ist. Der Wert für die maximale Breite kann definitiv geändert werden. Es gibt einige andere tolle Dinge, die Sie mit Media-Abfragen tun können, und Beispiele von ihnen finden Sie unter: http://www.w3schools.com/css/css_rwd_mediaqueries.asp.