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

empiric · Accepted Answer · 2015-04-20 09:01:12Z

2

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

edited Apr 20, 2015 at 9:01

answered Apr 20, 2015 at 8:54

empiric

7,8767 gold badges40 silver badges51 bronze badges

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

Comments

stanze · Accepted Answer · 2015-04-20 08:53:37Z

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, 2015 at 8:53

stanze

2,47814 silver badges14 bronze badges

Comments

Vecihi Baltacı · Accepted Answer · 2015-04-20 08:54:13Z

0

you can use addClass and removeClass methods to make it.

answered Apr 20, 2015 at 8:54

Vecihi Baltacı

3526 silver badges22 bronze badges

Comments

Estee · Accepted Answer · 2015-04-20 08:57:15Z

0

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

answered Apr 20, 2015 at 8:57

Estee

545 bronze badges

Collectives™ on Stack Overflow

change class css using jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Collectives™ on Stack Overflow

change class css using jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest