CODEWITHSUNDEEP
javascriptjquerycssstyles
Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Changing CSS Rules using JavaScript or jQuery

Initial Research

I am aware of using .css() to get and set the CSS rules of a particular element. I have seen a website with this CSS:

body, table td, select {
    font-family: Arial Unicode MS, Arial, sans-serif;
    font-size: small;
}

I never liked Arial Unicode as a font. Well, that was my personal feel. So, I would use Chrome's Style Inspector to edit the Arial Unicode MS to Segoe UI or something which I like. Is there anyway, other than using the following to achieve the same?

Case I

$("body, table td, select").css("font-family", "Segoe UI");

Case II

$('<style>body, table td, select {font-famnily: "Segoe UI";}</style>')
    .appendTo("head");

Upvotes: 0

Views: 893

Answers (2)

Joseph
Joseph

Reputation: 119837

Ok, if:

  • Personal Preference

    Then use user styles CSS. According to priority, user styles takes precedence above all other styles. Next comes inline-styles, then !important styles, then specificity, then default browser styles. If it's just for personal preference, pack-up a custom CSS with you and a browser that supports it.

  • You are the developer

    Then don't do this in JavaScript or user scripts. Go down to the problem and change those styles! You are just making the browser work more by actually making it parse stuff you don't want. Since you have access to the code, change the styles instead.

    However, since your site could be a public site, style it like genericly for everyone. It's not only you that's viewing the site.

  • Not the developer:

    The best way I can think of (and already did this before*) is to remove external stylesheets from the page and replace them with modded versions of your own liking. That is taking a copy of the original CSS file, change what needs to be changed, and then load it via JS by creating a <link> to that external file, or load the contents via AJAX and put them in a <style>. However, this approach is riddled with obstacles. <link> does not have an onload event so you won't know the external CSS was loaded (there are crafty workarounds though) and AJAXing CSS contents imply that your CSS is in the same domain or the browser and server supports CORS.

    Another way you can do it is to have JS peek into loaded stylesheets and modify their contents. This is a more JS intensive work since JS looks for your definition to change in a pile of CSS declarations. This is a safer bet, however, I believe not all browsers can traverse CSS styles or at least do it differently across browsers. Also, if you got a large stylesheet, you'd be parsing it every time.

    As you said, .css() would be recursive. True, because it applies inline styles to each affected element. This is good in a sense that inline styles are higher up in the priority so whatever is placed using .css(), you are almost sure that they will take effect. However, it's more work intensive since it involves the DOM now.

* The library I created does not remove existing styles, it just loads and unloads predefined styles declared using it's API

Upvotes: 5

Bergi
Bergi

Reputation: 664297

Have a look at:

I'm afraid there is no library for that, I really would like to see one...

Upvotes: 1

Related Questions