JavaScriptを使用してCSSセレクタを作成する

Question

JavaScriptを使用して特定のブラウザとモバイルでCSSセレクタを作成しようとしています。これはすでに動作しているメソッドです：

// 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); 
    } 

.is-(browser-name element-selector { css }を呼び出すことで素晴らしい結果が得られます。しかし、私はこれをモバイル用に動作させることはできません。ここに私のコードは、私がすでに動作しているjQueryを使ってif (mobile)セクションの外にすべてのものを使用してきたが、私は通常のCSSとJavaScriptを使用して、このプロセスは少し速くしたいと思います...

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 
 
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

あなたは以前、 "モバイルである" にスペースが必要です。 classNameはスペースで区切られたリストなので、現在の実装ではモバイルデバイスでの両方のチェックが中断されます。このような

何かが、配列に既存のクラス名を分割したいものを連結し、空間分離でそれらすべてを結合します

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

私はここES6 セットを使用することをお勧めします（お使いのブラウザがそれをサポートしている場合）、重複するクラス名を心配避けるために：

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

このスペースは問題の一部でした。それを手伝ってくれてありがとう。本当の問題は、しかし、何らかの理由で、私はラインで次のようになりますので...

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

は、ご回答ありがとうございました、ボディ」と、その行で「HTML」を置き換えなければならなかった！I

編集：何らかの理由で、私は文書の中にいくつかの事柄を並べ替えた後、私の古いコードは実際に働いていました...上記の方法ではうまくいきませんが私は新しいフォーマットを複数のファイルで投稿していますが、私のコードは次のようになります：

ヘッダで呼ばれるファイル

// 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); 
} 

モバイルまたはブラウザに基づいてDOMからアイテムを削除するファイル。より速い読み込みのためにフッターの他のスクリプトタグの前に呼び出されます。

var music = document.getElementById("music"); 
var musicLink = document.getElementById("music-link"); 
var photos = document.getElementById("photos"); 
var photosLink = document.getElementById("photos-link"); 

if (mobile) { 
    music.parentNode.removeChild(music); 
    musicLink.parentNode.removeChild(musicLink); 
    photos.parentNode.removeChild(photos); 
    photosLink.parentNode.removeChild(photosLink); 
} 

if (getBrowserName() == "msie") { 
    photos.parentNode.removeChild(photos); 
    photosLink.parentNode.removeChild(photosLink); 
} 

残りはjQueryとは別のJSファイルであり、この記事とはほとんど関係がありません。誰もが助けてくれてありがとう！