使用jQuery更改类css

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

Answer 1

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, eg:

.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

Answer 2

是的，你可以使用jQuery的帮助下做的，加入的jQuery newClass如果指定的条件为真，并使用jQuery removeClass反之亦然。

Answer 3

您可以使用addClass和removeClass方法来实现。

Answer 4

您可以使用带有class属性的jQuery来更改类，这是文档