HTML Change Klassenname basierend auf Bildschirmgröße

Ich versuche, den Namen eines Klassen-Tags dynamisch zu ändern, wenn ein Benutzer die Seite basierend auf der Bildschirmgröße lädt. Hier ist der Code:HTML Change Klassenname basierend auf Bildschirmgröße

<!DOCTYPE html> 
<html> 
<body onload="changeClass()"> 

<section class="example"> 
    <p>Hello</p> 
</section> 

<section class="example"> 
    <p>New section</p> 
</section> 

<script> 
function changeClass() { 
    var x = document.getElementsByClassName('example'); 
    var width = (window.innerHeight > 0) ? window.innerHeight : screen.Height; 
    console.log(width); 
    if(width <= 640) { 
     while(x.length > 0) { 
      x[1].className ='newClass'; 
     } 
    } else { 
     while(x.length > 0) { 
      x[0].className = "example"; 
     } 
    } 
} 
</script> 
</body> 
</html>

Die Seite wird jedoch in eine Endlosschleife geworfen und kann die Daten nicht laden. Gibt es eine einfache Möglichkeit, die benannte Klasse basierend auf der Größe des Bildschirms festzulegen? Kann ich beim Laden der Seite eine "if conditional" Prüfung durchführen? Ich habe auch eine JSFiddle enthalten. Ich weiß nicht, wie viel das aber helfen wird.

Quelle

2017-03-08 Dexstrum

Warum machst du das mit Javascript und nicht Medienabfragen in CSS? Es ist ein bisschen übertrieben, Javascript zu verwenden, um Stiländerungen zu behandeln. – Puzzle84

Ist Ihr Endziel, basierend auf der Bildschirmgröße, verschiedene Stile auf ein Element anzuwenden? Oder gibt es einen anderen Grund, den Klassennamen zu ändern? –

Ich suche nur nach dem einfachsten Weg, dies zu tun. Leute online haben Javascript vorgeschlagen. Ich möchte nur den Elementnamen basierend auf der Bildschirmgröße ändern. – Dexstrum

Wie in den Kommentaren erwähnt, sind Medienabfragen der beste Weg, um das zu erreichen, was Sie hier versuchen.

Das heißt, um die eigentliche Frage zu beantworten, wie es derzeit mit Ihrem Code steht, kommen Sie in eine Endlosschleife, weil Sie eine while Schleife verwenden. Die Länge des Arrays wird nie Null erreichen, so dass Ihre while Schleife niemals beendet wird.

Betrachten Sie den folgenden Code

if(width <= 640) { 
    for(var i = 0; i < x.length; i++) { 
     x[i].className ='newClass'; 
    } 
}

Offensichtlich verwenden Sie würden beide while Schleifen ändern müssen.

All das sagte jedoch, würde ich stark empfehlen, dass Sie Medienabfragen für diese verwenden, es sei denn, Sie haben einen zwingenden Grund nicht zu.

Wenn die Idee einfach ist Arten zu ändern auf Bildschirmgröße basiert, können Sie dies mit folgendem Zusatz zu Ihrem Stylesheet

@media (max-width: 640px) { 
    .example { 
     ... styles to show on smaller screens .... 
    } 
}

Quelle

2017-03-08 03:44:11

Danke. Ich weiß, wie man Medienabfragen benutzt. So wie ich den Code geschrieben habe, muss er repariert werden. Ich suchte nur nach einem leichteren Ausweg für dieses spezielle Problem, vor dem ich stehe. – Dexstrum

Es gibt einige Probleme zu erreichen, die ich in Ihrem Code zu sehen. Die erste Sache ist die Art, wie Sie bekommen, dass die Bildschirmbreite falsch ist.

sollte es wie folgt korrigiert werden.

var width = (window.innerWidth > 0) ? window.innerWidth : screen.Width;

Und die zweite Sache ist, dass Sie keine Schleife überhaupt brauchen. Nur der folgende Code wird mehr als genug sein, um das zu erreichen, wonach Sie suchen.

function changeClass() { 
    var x = document.getElementsByClassName('example'); 
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.Width; 
    console.log(width); 
    if(x.length > 0) { 
     if(width <= 640) { 
      x[1].className ='newClass'; 
     } else { 
      x[0].className = "example"; 
     } 
    } 
}

Quelle

2017-03-08 03:59:32

HTML Change Klassenname basierend auf Bildschirmgröße

Antwort

Verwandte Themen