用JS浏览器版本添加到<html>或<body>作为类

我试图找到一个久经考验的脚本嗅探的浏览器版本和增加适当命名类到<html>或<body>标签...像<html class="ie7">或<html class="ff4">或<html class="safari4">。用JS浏览器版本添加到<html>或<body>作为类

我不介意它是“firefox4”还是“ff4”或“firefox_4”......只要我可以使用该类来限定我的CSS范围。

我可以写一个脚本来此做自己，但我不知道是否有一个广泛使用的有...

感谢。

来源

2011-05-16 Simon

你想让它检测浏览器版本吗？或者只是将类属性放入html标记中？ – MattK311 2011-05-16 22:12:20

我需要检测版本并将相应的版本类添加到标签。 – Simon 2011-05-16 22:25:01

对于IE，你可以像使用HTML5 Boilerplate怎么做的条件注释。对于其他人，jQuery中有一些不推荐使用的方法，您可以利用它们来确定它们使用的浏览器和浏览器版本，即jQuery.browser。

当然，正如其他人提到的那样，您可以使用Modernizr，尽管我不认为它确实如何嗅探浏览器类型和版本。我很确定它只是做功能检测。

来源

2011-05-16 22:11:20 Jason

我通常会遵循这种做法，但我也希望针对非IE浏览器。 – Simon 2011-05-16 22:25:50

这确实针对非IE浏览器。阅读jQuery.browser链接。这正是你想要的。 – Jason 2011-05-16 22:27:05

我正在寻找一个准备和维护的脚本，它为我做。我不想在jQuery.browser上写一些开关。我喜欢他们是Modernizr的作品，但它不会增加我想要的关键类。谢谢。 – Simon 2011-05-16 22:31:19

-3

jQuery中，它是那样简单：

$('html').addClass('ie7');

在香草的Javascript：

var h = document.getElementsByTagName('html')[0]; 
h.className += ' ie7'; // note the preceding space

来源

2011-05-16 22:10:29

我认为他试图做嗅探，而不仅仅是添加类 – Jason 2011-05-16 22:11:46

我强烈的建议是使用众所周知的证明库作为Modernizr为你做。

来源

2011-05-16 22:11:59 Zlatev

伟大的思想思想一样！ haha – 2011-05-16 22:12:21

结帐Modernizr。它的确加上了更多！

来源

2011-05-16 22:11:59

我刚刚检查过，Modernizr看起来很有前途，但它没有添加浏览器版本的详细信息，这是我特别之后。谢谢。 – Simon 2011-05-16 22:20:37

它是值得一提的特定版本。其他任何东西在现代浏览器中都很常见，或者照顾Modernizr的分类器。 – Zlatev 2011-05-16 22:36:12

我不知道你的具体情况，但你永远不应该写代码是浏览器特定的。您应该编写特定功能的代码，这就是为什么应该使用Modernizr。这是最好的。它利用YepNopeJs以及IE Shim for HTML5支持。 – 2011-05-16 23:15:33

-1

var rootElement = document.documentElement; 
rootElement.className += ' ie7';

来源

2011-05-16 22:14:04 DrStrangeLove

我也需要对所有浏览器版本进行检测。 – Simon 2011-05-16 22:25:22

JQuery不检测浏览器。我会做这样的事情来检测IE。

if($.browser.msie) 
{ 
    if($.browser.version) 
    { 
     $('html').addClass('ie' + ($.browser.version)); 

    } 
}

当然，您可以用类似的方式检查Mozilla以及版本号。

有关这进一步说明，请参阅http://webhole.net/2010/07/07/browser-detection-with-jquery/

来源

2011-05-17 16:55:40 MattK311

在我来说，我需要添加一个类只适用于Chrome，而不是因为功能兼容性，但对于一个bug与background-position: fixed，所以我“解决”它使用此代码从@Jonathan Marzullo并添加一些CSS的指令仅此浏览器：

var isChromium = window.chrome, 
    vendorName = window.navigator.vendor, 
    isOpera = window.navigator.userAgent.indexOf("OPR") > -1; 
if(isChromium !== null && isChromium !== undefined && vendorName === "Google Inc." && isOpera == false) { 
    // is Google chrome 
    $('body').addClass('chrome'); 
}

这是你如何能做到用几行代码的具体浏览器检测任务的例子，但如果你需要一个强大的和完全编程和维持脚本为您提供有关用户浏览器，操作系统的所有信息和你可以想象的设备，这是WichBrowser。

它的沉重，复杂和作者建议不要使用它但它值得看看它的所有功能。

来源

2015-10-13 11:59:34 campsjos

var BrowserDetect = { 
     init: function() { 
      this.browser = this.searchString(this.dataBrowser) || "Other"; 
      this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown"; 
     }, 
     searchString: function (data) { 
      for (var i = 0; i < data.length; i++) { 
       var dataString = data[i].string; 
       this.versionSearchString = data[i].subString; 

       if (dataString.indexOf(data[i].subString) !== -1) { 
        return data[i].identity; 
       } 
      } 
     }, 
     searchVersion: function (dataString) { 
      var index = dataString.indexOf(this.versionSearchString); 
      if (index === -1) { 
       return; 
      } 

      var rv = dataString.indexOf("rv:"); 
      if (this.versionSearchString === "Trident" && rv !== -1) { 
       return parseFloat(dataString.substring(rv + 3)); 
      } else { 
       return parseFloat(dataString.substring(index + this.versionSearchString.length + 1)); 
      } 
     }, 

     dataBrowser: [ 
      {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"}, 
      {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"}, 
      {string: navigator.userAgent, subString: "Trident", identity: "Explorer"}, 
      {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"}, 
      {string: navigator.userAgent, subString: "Opera", identity: "Opera"}, 
      {string: navigator.userAgent, subString: "OPR", identity: "Opera"}, 

      {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
      {string: navigator.userAgent, subString: "Safari", identity: "Safari"}  
     ] 
    }; 

    BrowserDetect.init(); 
    document.write("You are using <b>" + BrowserDetect.browser + "</b> with version <b>" + BrowserDetect.version + "</b>"); 

    var bv= BrowserDetect.browser; 
    if(bv == "Chrome"){ 
     $("body").addClass("chrome"); 
    } 
    else if(bv == "MS Edge"){ 
    $("body").addClass("edge"); 
    } 
    else if(bv == "Explorer"){ 
    $("body").addClass("ie"); 
    } 
    else if(bv == "Firefox"){ 
    $("body").addClass("Firefox"); 
    }

来源

2017-03-24 09:56:30

很棒的工作，谢谢 – Suresh 2017-03-24 12:09:17

谢谢，eirenaios – 2017-03-27 08:34:43

用JS浏览器版本添加到<html>或<body>作为类

回答

相关问题