CODEWITHSUNDEEP
javascriptjquerycss
user4058171
user4058171

Reputation: 263

change class css using jquery

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

Upvotes: 0

Views: 95

Answers (4)

empiric
empiric

Reputation: 7878

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

Upvotes: 2

Estee
Estee

Reputation: 54

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

Upvotes: 0

Vecihi Baltacı
Vecihi Baltacı

Reputation: 352

you can use addClass and removeClass methods to make it.

Upvotes: 0

stanze
stanze

Reputation: 2480

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

Upvotes: 0

Related Questions