change class css using jquery

Question

I have a class which uses a media query:

css:

@media only screen and (min-width: 58.75em)
.top-bar-section ul li {
  border-left: 1px solid #fff;
  transform: skewX(15deg);
}

Now if the value of City() is London I want to change that css above to say:

 @media only screen and (min-width: 58.75em)
    .top-bar-section ul li {
      border-left: 1px solid #fff;
      transform: skewX(-15deg);
    }

My javascript is:

if (City() == "London"){
//change the css class from the first example to the 2nd?
}

Any help on how I can do this with jQuery to change a classes css? Thanks, Josh

Welcome to StackOverflow. Could you elaborate what you've tried so far please? jQuery offers an `addClass()` method as well as one for removing - have you tried these? — nuala, Apr 20 '15 at 08:54
see [this](http://stackoverflow.com/questions/6115325/change-css-rule-in-class-using-jquery) if helpful to you — Bhushan Kawadkar, Apr 20 '15 at 08:55

empiric · Accepted Answer · 2015-04-20T09:01:12.663

For specifying the css you can use the .css()-function of jQuery:

$('.top-bar-section ul li').css({
  '-webkit-transform' : 'skewX(-15deg)',
  '-moz-transform'    : 'skewX(-15deg)',
  '-ms-transform'     : 'skewX(-15deg)',
  '-o-transform'      : 'skewX(-15deg)',
  'transform'         : 'skewX(-15deg)'
});

Demo

Or you can specify a second class, e.g.:

.top-bar-section ul li.london {
    transform: skewX(-15deg);
}

and call

$('.top-bar-section ul li').addClass('london');

inside your if-condition. For removing the class you can use .removeClass()

Reference

.css()

.addClass()

.removeClass

score 0 · Answer 2 · answered Apr 20 '15 at 08:53

0

yes you can do with the help of jQuery, by adding jQuery newClass if specified condition is true, and use jQuery removeClass vice-versa.

answered Apr 20 '15 at 08:53

stanze

2,456
10
13

score 0 · Answer 3 · answered Apr 20 '15 at 08:54

0

you can use addClass and removeClass methods to make it.

answered Apr 20 '15 at 08:54

Vecihi Baltacı

352
4
20

score 0 · Answer 4 · answered Apr 20 '15 at 08:57

0

you can change classes using jQuery with the class attributes, here's the documentation

answered Apr 20 '15 at 08:57

Estee

54
5

change class css using jquery

4 Answers4