How to replace css using jquery after user agent detection

Question

I found this code to detect android native browser:

var nua = navigator.userAgent;
var is_android = ((nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 &&     nua.indexOf('AppleWebKit') > -1) && !(nua.indexOf('Chrome') > -1));

but how can I create function to repleace css after detection?

I know I should use something like that:

$('jQuery selector').css({"css property name":"css property value"});

but I don't now how :(

On the same page is other function that is using jquery.

I can't think a case where you want to change 1 or 2 elements based on a specific browser. Perhaps you want to change to another CSS file, containing all the changes for Android devices? — user1299518
– user1299518, Commented Jan 5, 2016 at 11:35
If it is just for detecting android, can't we have it like this if(nua.indexOf('Android ') > -1). — Sahil
– Sahil, Commented Jan 5, 2016 at 11:59

Sahil · Accepted Answer · 2016-01-05 12:00:53Z

1

var nua = navigator.userAgent;
var is_android = ((nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 &&     nua.indexOf('AppleWebKit') > -1) && !(nua.indexOf('Chrome') > -1));

if (is_android){
  //for eg you want to remove border of a div with id #container
  $('#container').css({"border":"none"});
  //Best is to have a class created in css with which ever property you want to remove
  // if the class was .green-color
  $('#container').removeClass('green-color');
}

edited Jan 5, 2016 at 12:00

answered Jan 5, 2016 at 11:35

Sahil

3,3381 gold badge23 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marcos Pérez Gude · Accepted Answer · 2016-01-05 11:40:17Z

0

The best way is to add a classname to <html> or <body> tag, with that trick you can modify the pure CSS without jquery selectors and DOM manipulation, making it really flexible and performance:

 if(is_android) { 
       $('html').addClass('android');
 } else {
       $('html').removeClass('android');
 }

and then with CSS as simple as this:

 h1 { color:blue; }
 .android h1 { color:green; }
 .android body {background: black; }

answered Jan 5, 2016 at 11:40

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:32:21Z

0

both Url as following that hopefully can help you to deal with your problems

How can I use JQuery to replace CSS background image and maintain gradient?

Replace CSS property with jQuery conditional

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Jan 5, 2016 at 11:39

Willie Cheng

8,36314 gold badges63 silver badges72 bronze badges

Collectives™ on Stack Overflow

How to replace css using jquery after user agent detection

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related