CSS-Einstellungen in der CSS-Datei und nicht dem reinen Quelltext vornehmen

[Matze202]

hiho @all,

ich habe mir folgendes Script zusammen gestellt, was soweit auch fast so funktioniert, wie ich es gern haben möchte. Aber leider nur fast.

function nav_open(nav) {
  var elem = document.getElementById(nav);
  if(typeof elem.style.display != 'undefined'){
    if(elem.style.display == 'block'){
      elem.style.display = 'none';
    }else{
      elem.style.display = 'block';
    }
  }
}

1. Diese Einstellungen werden im Quelltext vorgenommen, aber nicht in meiner verwendeten CSS-Datei.
1.1. Diese Einstellungen sollen aber in dem entsprechenden media screen Bereich der CSS-Datei vorgenommen werden, damit es keine Veränderungen der normalen CSS-Einstellungen haben soll.
1.2. Denn bis jetzt sieht es so aus, dass ich eine Navigation in der Fußleiste habe, diese wird bei kleineren Auflösungen ausgeblendet und dafür ein Button eingeblendet. Wenn man diesen Button anklickt, erscheint die Navigation senkrecht über der Fußleiste und lässt sich auch wieder schließen.
1.3. Wenn ich nun ein- oder mehrfach den Button auf meinem Computer im verkleinerten Browserfenster klicke und danach den Browser wieder groß mache, soll die Navigation wieder in der Fußleiste erscheinen, so wie es in den normalen Einstellungen der CSS-Datei eingerichtet ist. Dies geschieht aber leider nicht, sondern verschwindet selbst, wenn diese im verkleinerten Browser eingeblendet wird.
EDIT zu 1.3.: Dies funktioniert leider nicht, weil die Listen in der Fußzeile als display:inline-block; eingebaut ist und die senkrechte Auslistung soll ja über der Fußzeile angezeigt werden, weshalb dies als display:block; gehandhabt wird. Dieser Unterschied steckt halt leider in dem media screen Bereich der CSS-Datei.

2. Zum Verständnis noch die Frage, wieso funktioniert dieses "if(typeof elem.style.display != 'undefined'){", was ich so verstehe, dass wenn der typeof von elem.style.display nicht undefiniert ist, soll er den innenliegenden Vergleich ausführen.
2.2. Dies tut der IF-Vergleich aber auch, wenn der typeof von elem.style.display nicht definiert ist oder akzeptiert er an dieser Stelle auch die Einstellungen der CSS-Datei und nicht nur des Quell-Textes?

Gruß Matze202.

EDIT: Jquery habe ich eingebunden, weil ich das später für andere Dinge benötigen werde, aber mich da erst noch einlernen muss.

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>

 

[SpiceLab]

Meines Wissens lassen sich die Eigenschaften in einer CSS-Datei per JS auslesen ( siehe http://www.drweb.de/magazin/html-5-...igenschaften-von-stylesheets-zugreifen-45257/ ), aber nicht darin ändern/überschreiben.

Sind für dein Vorhaben "CSS3 Media Queries" oder ein adäquates CSS-Framework (wie z.B. Bootstrap) nicht effizienter/praktikabler?

 

[Matze202]

Danke @SpiceLab für deine Info, ich arbeite dabei bereits mit den "CSS3 Media Queries" (das meinte ich oben mit dem "media screen", was es leider noch nicht komplett benannt hatte, denn wie ich gerade erfahren habe, ist dieses etwas älter, aber in Wirklichkeit nutze ist das "@media screen and (max-width: 800px)" und damit passe ich das Design bereits soweit an die Größen der Browser an), welche ich auch super in der Grundform händeln kann, aber wie ändere ich in einem "CSS3 Media Queries" die Werte mit Javascript? (EDIT: Also vielleicht nicht direkt in der CSS-Datei, wenn dies nicht möglich ist, sondern in dem Style-Element von dem Tag, wo die ID vorhanden ist, aber nur im Bezug auf dieses CSS3 Media Queries und nicht auf alle Einstellungen.)

Das nicht die Einstellungen außerhalb der "@media screen and (max-width: 800px)" in Mitleidenschaft gezogen werden?

 

[jeipack]

Javascript erstellt immer inline-Styles. Wenn du nun styles nur für eine bestimmte Auflösung setzen willst musst du diese, falls diese Auflösung nicht mehr gegeben ist, wieder löschen.
Hier zB ein Code von mir wo ich anhand der Fenstergrösse das mein Menu verschiebe:

function moveMainnavi() {
    if(Math.max( $(window).width(), window.innerWidth) <= 1120) {
        if($(".main-navi-container-mobile ul.main-navi").length == 0) {
            $(".main-navi-container-mobile").append($("ul.main-navi"));
        }
    } else {
        if($(".main-navi-div ul.main-navi").length == 0) {
            $(".main-navi-div").append($("ul.main-navi"));
        }
    }
}

moveMainnavi();
$(window).resize(function() {
    moveMainnavi();
});

Eine Alternative ist via Javascript einfach nur eine Klasse zu setzen die die Einstellungen überschreibt (zB mit !important) und diese Klasse wieder zu entfernen wenn gewünscht und die alten Styles wirken wieder.

 

[SpiceLab]

Nur mal so am Rande bemerkt

Grundsätzlich lässt sich die gewünschte Regelung der (Un)Sichtbarkeit, wie auch die Umgestaltung der übrigen involvierten Elemente, in den Media Queries erledigen.

Vereinfachtes heruntergebrochenes Beispiel:

nav {display:block}
nav ul li {display:inline-block}
button {display:none}
@media screen and (max-width: 800px) {
  nav {display:none;width:150px}
  button, nav ul li {display:block}
}

Da hier aber zusätzlich per Button + JS im schmäleren Viewport die (Un)Sichtbarkeit gesteuert werden soll, reagiert die Medienabfrage nach "Öffnen & Schließen" nicht mehr auf die Skalierung der Fensterbreite.

Die Lösungen hierfür hat @jeipack genannt.

[edit]Tipp-Ex[/edit]​