admin管理员组

文章数量:1025278

I'm trying to find a tried and tested script that sniffs the browser version and adds a suitably named class to the <html> or the <body> tags... like <html class="ie7"> or <html class="ff4"> or <html class="safari4">.

I don't mind if it's "firefox4" or "ff4" or "firefox_4"... just as long as I can use the class to scope my css.

I could write a script to do this myself but I was wondering if there was a widely used one out there...

Thanks.

I'm trying to find a tried and tested script that sniffs the browser version and adds a suitably named class to the <html> or the <body> tags... like <html class="ie7"> or <html class="ff4"> or <html class="safari4">.

I don't mind if it's "firefox4" or "ff4" or "firefox_4"... just as long as I can use the class to scope my css.

I could write a script to do this myself but I was wondering if there was a widely used one out there...

Thanks.

  • javascript
  • css
Share Improve this question edited May 16, 2011 at 22:24 Simon asked May 16, 2011 at 22:06 SimonSimon 5,2478 gold badges45 silver badges66 bronze badges 2
  • Do you want it to detect the browser version too? Or just put in the class attribute into the html tag? – Techgration Commented May 16, 2011 at 22:12
  • I need to detect the version and add an appropriate version class to the tag. – Simon Commented May 16, 2011 at 22:25
Add a ment  | 

7 Answers 7

Reset to default 2

For IE, you can use conditional ments like how HTML5 Boilerplate does it. For the others, there are some deprecated methods in jQuery that you can exploit to determine what browser and browser version they're using, namely jQuery.browser.

And of course, as others are mentioning, you can use Modernizr, although I don't think it does sniffing of browser type and version exactly how you want. I'm pretty sure it just does feature detection.

JQuery does browser detection. I would do something like this to detect IE.

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

    }
}

And of course you could check for Mozilla along with a version number in a similar fashion.

For a further explanation on it, see http://webhole/2010/07/07/browser-detection-with-jquery/

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

In my case I needed to add a class only for Chrome, not because feature patibility but for a bug with background-position: fixed, so I "solved" it using this code from @Jonathan Marzullo and adding some CSS directives only for this browser:

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

This is an example for how you can do a concrete browser detection task with few lines of code, but if you need a powerful and fully mantained script that gives you all the information about the user browser, O.S. and device you can imagine, this is WichBrowser.

Its heavy, plicated and the author remends to do not use it but it worths a look to all its features.

Found this tutorial that does exactly what the OP wants using Detect.js and jQuery.

jQuery(function( $ ){
    var ua = detect.parse(navigator.userAgent);
    $('html').addClass(ua.browser.family.toLowerCase());
});

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

In jquery, it's as simple as:

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

In vanilla Javascript:

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

I'm trying to find a tried and tested script that sniffs the browser version and adds a suitably named class to the <html> or the <body> tags... like <html class="ie7"> or <html class="ff4"> or <html class="safari4">.

I don't mind if it's "firefox4" or "ff4" or "firefox_4"... just as long as I can use the class to scope my css.

I could write a script to do this myself but I was wondering if there was a widely used one out there...

Thanks.

I'm trying to find a tried and tested script that sniffs the browser version and adds a suitably named class to the <html> or the <body> tags... like <html class="ie7"> or <html class="ff4"> or <html class="safari4">.

I don't mind if it's "firefox4" or "ff4" or "firefox_4"... just as long as I can use the class to scope my css.

I could write a script to do this myself but I was wondering if there was a widely used one out there...

Thanks.

  • javascript
  • css
Share Improve this question edited May 16, 2011 at 22:24 Simon asked May 16, 2011 at 22:06 SimonSimon 5,2478 gold badges45 silver badges66 bronze badges 2
  • Do you want it to detect the browser version too? Or just put in the class attribute into the html tag? – Techgration Commented May 16, 2011 at 22:12
  • I need to detect the version and add an appropriate version class to the tag. – Simon Commented May 16, 2011 at 22:25
Add a ment  | 

7 Answers 7

Reset to default 2

For IE, you can use conditional ments like how HTML5 Boilerplate does it. For the others, there are some deprecated methods in jQuery that you can exploit to determine what browser and browser version they're using, namely jQuery.browser.

And of course, as others are mentioning, you can use Modernizr, although I don't think it does sniffing of browser type and version exactly how you want. I'm pretty sure it just does feature detection.

JQuery does browser detection. I would do something like this to detect IE.

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

    }
}

And of course you could check for Mozilla along with a version number in a similar fashion.

For a further explanation on it, see http://webhole/2010/07/07/browser-detection-with-jquery/

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

In my case I needed to add a class only for Chrome, not because feature patibility but for a bug with background-position: fixed, so I "solved" it using this code from @Jonathan Marzullo and adding some CSS directives only for this browser:

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

This is an example for how you can do a concrete browser detection task with few lines of code, but if you need a powerful and fully mantained script that gives you all the information about the user browser, O.S. and device you can imagine, this is WichBrowser.

Its heavy, plicated and the author remends to do not use it but it worths a look to all its features.

Found this tutorial that does exactly what the OP wants using Detect.js and jQuery.

jQuery(function( $ ){
    var ua = detect.parse(navigator.userAgent);
    $('html').addClass(ua.browser.family.toLowerCase());
});

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

In jquery, it's as simple as:

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

In vanilla Javascript:

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

本文标签： javascriptUse JS to add browser version to lthtmlgt or ltbodygt as classStack Overflow

版权声明：本文标题：javascript - Use JS to add browser version to &lt;html&gt; or &lt;body&gt; as class - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745618039a2159407.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。