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 prevent css borders from floating to the top of parent div

    How to add physics to CSS animations?

    How to add tabs or spaces to a textline with CSS?

    How can I reduce the space between two elements in CSS?

    bar graph with CSS, how to get it filling in from bottom to top, not top to bottom?

    How to use css to crop parts of an image

    How to run PHP through Adobe Muse generated CSS

    How do I make numbered paragraphs (HTML5/CSS3)

    Border of outer element affects how margin of inner element is displayed, why?

    How to create a template that will show only in IE6 using javascript?

    How to resolve background-image url inside css file while using azure blob storage

    How to color specific word in a container using CSS

    How to distribute DIVS evenly (horizontal and vertical) that floats with each other?

    How to remove unnecessary margin on top?

    How to enable real time CSS editing in chrome?

    css show separator icon for icons

    How to remove an elements active state when a sub element is clicked

    How to scale div from jquery css

    How to make image appear upon hover over text using css?

    How to refer to an anchor pane in css?

    How to change CSS style of nested list items?

    How to use :before for the third
  • element?
  • how to set base_url() inside css file using codeigniter, to access background_image_url inside css file?

    How to manage clashing third party CSS

    How to open a bootstrap modal when checked a chec-box (when a tick is placed on a check box)

    How can I prevent overflow from a fieldset?

    How to create a button with overlapping Ribbon Shape in CSS?

    How do I fit custom size icons into jQuery UI buttons?

    IE css filter: adding black outline to text - how do I remove it?

    How to manage div positionning?