使用JavaScript创建CSS选择器

我正在尝试使用某些浏览器和移动设备使用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 }来效果很好。但是，我无法为移动设备工作。这是我的代码...

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

我一直在使用jQuery的if (mobile)部分以外的所有内容，它已经有效，但是我想使用常规CSS和JavaScript更快地使此过程更快。我会包含一个工作代码段，但是显然它不起作用，因为我当前的代码取决于使用某些浏览器的用户...我包含了一个示例，希望它可以更容易阅读。

有人知道为什么此代码适用于不同的浏览器部分，而不是手机？感谢您的帮助！

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

至少在" is-mobile"之前需要一个空间。className是一个空格分离的列表，因此您当前的实现会破坏您在移动设备上的两个检查。

类似的东西将现有类名称分为数组，将您想要的一个名称串成一个，然后将它们与空间分开一起加入：

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

我建议在此处使用ES6 SET （如果您的浏览器支持）避免担心重复的类名称：

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)

空间是问题的一部分。谢谢大家为我提供帮助。但是，由于某种原因，真正的问题是我必须在"正文"中替换那条线中的" html"，所以现在看起来像这样...

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

谢谢大家的回复！我明天将发布代码的重写形式。

编辑：出于某种原因，在我重新安排文档中的一些内容后，我的旧代码实际上奏效了……即使它在重新安排之前无法像上面写的那样起作用。我正在使用多个文件发布新格式，但这是我的代码现在的样子：

分配CSS ClassNames的文件。称为标题

// ASSIGN CLASSNAME TO MOBILE DEVICES
var mobile = (/iphone|ipod|android|blackberry|mini|windowssce|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文件中，并且与此帖子无关。再次感谢大家的帮助！

相关内容

最新更新

热门标签：