How to override the external CSS using some condition in Jquery?


Tags: javascript,jquery,html,css

Problem :

Actually, I have an application for different countries in different languages and external CSS is defined for all the HTML elements on the Page using classes and Id's. What I want is to change the font of the whole website for a particular country but I don't want to do it by applying the CSS to all the classes again and again. So Is there a way that I can change the CSS(font) of whole website in a go or by using a convenient way.



Solution :

Due to the fact that you're saying there's styles set by ID, the only way to really override these without doing specific style for each element, would be inline styles.

To avoid having to set it for every class like in the example above, you would do something like this instead:

$('h1, h2, h3, h4, h5, h6, p, a').css('font-family', 'verdana');

In the selector part (the first part) you either go through this list and take all relevant elements - or better yet: go through a few samples of the pages you're going to be using and select the relevant html elements from there. It shouldn't really take that long.

For the part about making your solution work on only specific languages/countries I would do something like this:

$('h1, h2, h3, h4, h5, h6, p, a', 'body.en-us, body.en-ca').css('font-family', 'verdana');

Then you can apply class 'en-us', 'en-ca', 'fr-fr' to the body tag and use this to target your javascript changes for those specific countries. Depending on what kind of changes you need to do or how many countries you need to do this for, another approach could be to apply a 'font-verdana' class or something similar to the body tag for those countries and then simply use this as the parent selector instead of the countries/locales.


    CSS Howto..

    How to align brand title and links left in Bootstrap navbar?

    How can design a full screen calendar view in Twitter Bootstrap?

    Border around tr element doesn't show?

    How to select the table heading of the first row in table using css selectors?

    How to make the element located in the center of a div?

    How to float Dojo DropDownMenu over a table cell

    how to overwrite css style

    How to sprite body background in CSS

    how can we prevent a block from being printed across different pages

    jQuery - CSS DropDown Navigation Items - How to build a Carrot Dropdown

    How to change line height for small text with CSS? There seems to be a limit to how small line-height can be

    CSS property padding-top only works on the first element of a list. How do I apply to all the elements?

    Bold text not showing on iPhone but displays fine on Android

    How to make columns scroll independently using CSS?

    how to compute Facebook graph api cover offset_y to pixel?

    how to clean the css style of jquery-ui be added automatically when someone use “.draggable()”

    How can I change input type of Yii CJuiAutoComplete?

    How to change an input button with pure css button (no images)? [duplicate]

    Force jQuery show/hide to respect display: table?

    Does HTML5 DOCTYPE affect how CSS3 effects are rendered?

    How to make a number of breaks in CSS? [closed]

    How to merge css in wordpress

    CSS triangle over a div using :before and :after - weird offset, how to fix?

    How To Outline a PNG (Transparent) image with CSS?

    How to style the tabs in primary menu links in a Drupal 7 subtheme?

    How remove space on around content (css)?

    Show button after login

    how to flip the div using css?

    How to make the margins and border in a mobile website invisible html/css

    How to achieve disorganised bubble layout with html css?