javascript - jQuery to add Browser-Name into css-class - Stack Overflow

admin管理员组

文章数量:1389805

I'm using jQuery to detect the Users Browser-Agent and than add the browser-name as a css-class to the body. This works like magic with webkit and mozilla … but with msie it fails — but don't know why. For msie i also have to add not only the «msie», but also one class with the version-number of the used msie (like «msie7» or «msie8»).

Everything works, only the msie-section does not!

my (full) jQuery-Code:

    <script type="text/javascript">
<!--
(function($){
    $(function(){

        var $copy = $('div.SPA_printcontact').clone();
        var $body = $('body');

        $copy.insertAfter('#printdate');

        if($.browser.msie) {
            $body.addClass('msie')
            var userAgent = userAgent.substring(0,userAgent.indexOf('.'));
            var version = userAgent;
            $body.addClass('msie' + version)
        }
        if($.browser.webkit) {
            $body.addClass('webkit')
        }
        if($.browser.mozilla) {
            $body.addClass('mozilla')
        }

    });
}(jQuery));
-->
</script>

I'm using jQuery to detect the Users Browser-Agent and than add the browser-name as a css-class to the body. This works like magic with webkit and mozilla … but with msie it fails — but don't know why. For msie i also have to add not only the «msie», but also one class with the version-number of the used msie (like «msie7» or «msie8»).

Everything works, only the msie-section does not!

my (full) jQuery-Code:

    <script type="text/javascript">
<!--
(function($){
    $(function(){

        var $copy = $('div.SPA_printcontact').clone();
        var $body = $('body');

        $copy.insertAfter('#printdate');

        if($.browser.msie) {
            $body.addClass('msie')
            var userAgent = userAgent.substring(0,userAgent.indexOf('.'));
            var version = userAgent;
            $body.addClass('msie' + version)
        }
        if($.browser.webkit) {
            $body.addClass('webkit')
        }
        if($.browser.mozilla) {
            $body.addClass('mozilla')
        }

    });
}(jQuery));
-->
</script>

• javascript
• jquery
• internet-explorer

Share Improve this question Follow asked Jan 19, 2011 at 9:39 albuveealbuvee 2,76466 gold badges2929 silver badges3838 bronze badges 4

• I know that it's not what you asked, but I feel obligated to point out, that your approach to (probably?) apply different styles to different browsers has some issues. Here's one of many articles written on this subject: css-tricks./browser-detection-is-bad – polarblau Commented Jan 19, 2011 at 9:47
• I'm pretending you did not hear about $.browser.version. I may be wrong. :) and what's Everything works, only the msie-section does not! ? Can you give us a hint on what's happening in IE? – Reigel Gallarde Commented Jan 19, 2011 at 9:49
• 1 Your script will fail for any browser you missed or any new version of IE which is bad design. – David Mårtensson Commented Jan 19, 2011 at 9:54
• @polarblau & David: I know, I know, but that's right now the only way to go with this one SharePoint-Project … :-/ – albuvee Commented Jan 19, 2011 at 10:23

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

http://api.jquery./jQuery.browser/

Try using $.browser.version to get the version no instead

EDIT: This has been deprecated in jQuery v1.9 and upwards. Please refer to Tom's answer below.

There is no global object userAgent. It's a member of navigator, so use navigator.userAgent instead or the version provide by jQuery like suggested by Mohib Sheth

You can use Detectizr

https://github./barisaydinoglu/Detectizr

Detectizr is a Modernizr extension to detect

• device
• device model
• device orientation
• screen size
• operating system
• operating system version
• operating system version full
• browser
• browser version
• browser engine
• browser plugins

Detection of these sets are optional and can be disabled.

alternatively there is also http://rafael.adm.br/css_browser_selector/ which Detectizr is based on (is more light weight)

Please try using $('body').addClass() if that does not work, then try $('body').attr("class",msie+version).

本文标签： javascriptjQuery to add BrowserName into cssclassStack Overflow