CSS-Selektor mit JavaScript erstellen

Question

Ich versuche CSS-Selektoren mit JavaScript für bestimmte Browser und auf Mobilgeräten zu erstellen. Dies ist die Methode, die bereits funktioniert:

// CHECK BROWSER AND SET AS CSS METHOD 
    function getBrowserName() { 
     var name = "Unknown"; 
     if(navigator.userAgent.indexOf("MSIE")!=-1){ 
      name = "msie"; 
     } if(navigator.userAgent.indexOf("Trident")!=-1){ 
      name = "msie"; 
     } if(navigator.userAgent.indexOf("Edge")!=-1){ 
      name = "msie"; 
     } else if(navigator.userAgent.indexOf("Firefox")!=-1){ 
      name = "firefox"; 
     } else if(navigator.userAgent.indexOf(" OPR/")>=0){ 
      name = "opera"; 
     } else if(navigator.userAgent.indexOf("Chrome") != -1){ 
      name = "chrome"; 
     } else if(navigator.userAgent.indexOf("Safari")!=-1){ 
      name = "safari"; 
     } 
     return name; 
    } 

    if (getBrowserName() != "Unknown"){ 
     document.getElementsByTagName('html')[0].className += "is-" + getBrowserName(name); 
    } 

Dies funktioniert gut durch .is-(browser-name element-selector { css } Aufruf. Ich kann das jedoch nicht für das Handy nutzen. Hier ist mein Code ...

var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())); 
if (mobile) { 
    document.getElementsByTagName('html')[0].className += "is-mobile"; 
} 

Ich habe alles mit außerhalb des if (mobile) Abschnitt mit jQuery, die bereits funktioniert, aber ich möchte diesen Prozess machen ein bisschen schneller regelmäßigen CSS und JavaScript verwenden. Ich würde ein funktionsfähiges Code-Snippet hinzufügen, aber es wird offensichtlich nicht funktionieren, da mein aktueller Code davon abhängt, dass der Benutzer bestimmte Browser verwendet ... Ich habe ein Beispiel eingefügt, in der Hoffnung, dass es leichter zu lesen ist.

Hat jemand eine Idee, warum dieser Code für die verschiedenen Browser-Abschnitt funktioniert, aber nicht das Handy? Danke für die Hilfe!

// WORKS 
 
function getBrowserName() { 
 
    var name = "Unknown"; 
 
    if (navigator.userAgent.indexOf("MSIE") != -1) { 
 
    name = "msie"; 
 
    } 
 
    if (navigator.userAgent.indexOf("Trident") != -1) { 
 
    name = "msie"; 
 
    } 
 
    if (navigator.userAgent.indexOf("Edge") != -1) { 
 
    name = "msie"; 
 
    } else if (navigator.userAgent.indexOf("Firefox") != -1) { 
 
    name = "firefox"; 
 
    } else if (navigator.userAgent.indexOf(" OPR/") >= 0) { 
 
    name = "opera"; 
 
    } else if (navigator.userAgent.indexOf("Chrome") != -1) { 
 
    name = "chrome"; 
 
    } else if (navigator.userAgent.indexOf("Safari") != -1) { 
 
    name = "safari"; 
 
    } 
 
    return name; 
 
} 
 

 
if (getBrowserName() != "Unknown") { 
 
    document.getElementsByTagName('html')[0].className += "is-" + getBrowserName(name); 
 
} 
 

 
// DOESN'T WORK 
 
var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())); 
 

 
if (mobile) { 
 
    document.getElementsByTagName('html')[0].className += "is-mobile"; 
 
} 
 

 
// WORKS 
 
if (mobile) { 
 
    $(".about-text").css("width", "90%"); 
 
    $("body").css("font-size", "50px"); 
 
    $("section").css("padding-top", "160px"); 
 
}

/* works */ 
 
.is-msie hr { 
 
    margin: 50px 0 10px 0; 
 
} 
 

 

 
/* doesn't work */ 
 
.is-mobile hr { 
 
    margin: 50px 0 10px 0; 
 
}

<!--REPEATING TABLE WITH HR FOR SEPARATORS --> 
 
<div class="col span-1-of-2 table right-col"> 
 
    <hr> 
 
    <div> 
 
    <div class="col span-1-of-8 date"> 
 
     <p><span>12</span> Nov.</p> 
 
    </div> 
 
    <div class="col span-1-of-8 venue"> 
 
     <p>The Venue</p> 
 
    </div> 
 
    <div class="col span-1-of-8 city"> 
 
     <p>San Francisco, CA</p> 
 
    </div> 
 
    <div class="col span-1-of-8 rsvp desktop"> 
 
     <div><a class="btn-sm btn-full" href="#">RSVP</a></div> 
 
    </div> 
 
    <div class="col span-1-of-8 tickets desktop"> 
 
     <div><a class="btn-sm btn-ghost" href="#">Tickets</a></div> 
 
    </div> 
 
    <div class="col span-2-of-8 info"> 
 
     <div><a class="btn-sm btn-full" href="#">Info</a></div> 
 
    </div> 
 
    </div> 
 
    <hr> 
 
    <div> 
 
    <div class="col span-1-of-8 date"> 
 
     <p><span>12</span> Nov.</p> 
 
    </div> 
 
    <div class="col span-1-of-8 venue"> 
 
     <p>The Venue</p> 
 
    </div> 
 
    <div class="col span-1-of-8 city"> 
 
     <p>San Francisco, CA</p> 
 
    </div> 
 
    <div class="col span-1-of-8 rsvp desktop"> 
 
     <div><a class="btn-sm btn-full" href="#">RSVP</a></div> 
 
    </div> 
 
    <div class="col span-1-of-8 tickets desktop"> 
 
     <div><a class="btn-sm btn-ghost" href="#">Tickets</a></div> 
 
    </div> 
 
    <div class="col span-2-of-8 info"> 
 
     <div><a class="btn-sm btn-full" href="#">Info</a></div> 
 
    </div> 
 
    </div> 
 
    <hr> 
 
    <div> 
 
    <div class="col span-1-of-8 date"> 
 
     <p><span>12</span> Nov.</p> 
 
    </div> 
 
    <div class="col span-1-of-8 venue"> 
 
     <p>The Venue</p> 
 
    </div> 
 
    <div class="col span-1-of-8 city"> 
 
     <p>San Francisco, CA</p> 
 
    </div> 
 
    <div class="col span-1-of-8 rsvp desktop"> 
 
     <div><a class="btn-sm btn-full" href="#">RSVP</a></div> 
 
    </div> 
 
    <div class="col span-1-of-8 tickets desktop"> 
 
     <div><a class="btn-sm btn-ghost" href="#">Tickets</a></div> 
 
    </div> 
 
    <div class="col span-2-of-8 info"> 
 
     <div><a class="btn-sm btn-full" href="#">Info</a></div> 
 
    </div> 
 
    </div> 
 
    <hr> 
 
    <div> 
 
    <div class="col span-1-of-8 date"> 
 
     <p><span>12</span> Nov.</p> 
 
    </div> 
 
    <div class="col span-1-of-8 venue"> 
 
     <p>The Venue</p> 
 
    </div> 
 
    <div class="col span-1-of-8 city"> 
 
     <p>San Francisco, CA</p> 
 
    </div> 
 
    <div class="col span-1-of-8 rsvp desktop"> 
 
     <div><a class="btn-sm btn-full" href="#">RSVP</a></div> 
 
    </div> 
 
    <div class="col span-1-of-8 tickets desktop"> 
 
     <div><a class="btn-sm btn-ghost" href="#">Tickets</a></div> 
 
    </div> 
 
    <div class="col span-2-of-8 info"> 
 
     <div><a class="btn-sm btn-full" href="#">Info</a></div> 
 
    </div> 
 
    </div> 
 
    <hr> 
 
</div>

Answer 1

Zumindest müssen Sie ein Leerzeichen vor dem "is-mobile". className ist eine durch Leerzeichen getrennte Liste, sodass Ihre aktuelle Implementierung beide Prüfungen auf einem mobilen Gerät durchbricht.

So etwas spaltet die bestehenden Klassennamen in ein Array ein, verkettet die, die Sie wollen, verbindet sie dann alle mit Raumtrennung:

(document.getElementsByTagName('html')[0].className || "").split(" ").concat(["is-mobile"]).join(" "); 

ich die Verwendung eines ES6 hier einstellen würde empfehlen (wenn Ihr Browser es unterstützen) zu vermeiden, sich Gedanken über die doppelte Klassennamen:

let htmlElement = document.querySelector('html') 
 

 
// Use a Set to avoid duplicates. 
 
let classNames = new Set((htmlElement.className || '').split(' ')) 
 
classNames.add('is-safari') 
 
classNames.add('is-mobile') 
 

 
// Convert the set of class names to an array and join them. 
 
htmlElement.className = Array.from(classNames).join(' ') 
 

 
console.log(htmlElement.className)

Answer 2

Der Platz war Teil des Problems. Danke, dass Sie mir dabei geholfen haben. Das eigentliche Problem aber aus irgendeinem Grund war ich mit „Körper, um die„html“in dieser Zeile zu ersetzen hatte, so dass die Linie sieht nun wie folgt ...

document.getElementsByTagName('body')[0].className += " is-mobile"; 

Danke für eure Antworten! I wird morgen eine umgeschriebene Form des Codes veröffentlichen

EDIT: Aus irgendeinem Grund, nachdem ich ein paar Dinge in meinem Dokument neu arrangiert hatte, funktionierte mein alter Code tatsächlich ... obwohl es nicht so funktionieren würde, wie ich oben geschrieben habe Ich poste das neue Format mit mehreren Dateien, aber so sieht mein Code jetzt aus:

Datei, die CSS-Klassennamen zuweist.Rufen Sie in der Kopfzeile

// ASSIGN CLASSNAME TO MOBILE DEVICES 
var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())); 

if (mobile) { 
    document.getElementsByTagName('html')[0].className += " is-mobile"; 
} 

// $(".about-text").css("width", "90%"); 


// ASSIGN CLASSNAME TO APPLE DEVICES 
var appleDevice = (/iphone|ipod/i.test(navigator.userAgent.toLowerCase())); 

if (appleDevice) { 
    document.getElementsByTagName('html')[0].className += " is-apple"; 
} 

// CHECK BROWSER AND ASSIGN APPROPRIATE CLASSNAME 
function getBrowserName() { 
    var name = "Unknown"; 
    if(navigator.userAgent.indexOf("MSIE")!=-1){ 
     name = "msie"; 
    } if(navigator.userAgent.indexOf("Trident")!=-1){ 
     name = "msie"; 
    } if(navigator.userAgent.indexOf("Edge")!=-1){ 
     name = "msie"; 
    } else if(navigator.userAgent.indexOf("Firefox")!=-1){ 
     name = "firefox"; 
    } else if(navigator.userAgent.indexOf(" OPR/")>=0){ 
     name = "opera"; 
    } else if(navigator.userAgent.indexOf("Chrome") != -1){ 
     name = "chrome"; 
    } else if(navigator.userAgent.indexOf("Safari")!=-1){ 
     name = "safari"; 
    } 
    return name; 
} 

if (getBrowserName() != "Unknown"){ 
    document.getElementsByTagName('html')[0].className += " is-" + getBrowserName(name); 
} 

Datei, die Elemente aus DOM basierend auf mobilen oder Browser entfernt. Wird vor allen anderen Script-Tags in der Fußzeile aufgerufen, um schneller geladen zu werden.

Der Rest ist in einer separaten JS-Datei mit jQuery und weitgehend irrelevant für diesen Beitrag. Nochmals vielen Dank für die Hilfe von allen!