Changing CSS Rules using JavaScript or jQuery

Question

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");

• Recursive, performance intensive.
• Doesn't work when things are loaded on the fly.

Case II

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

• Any other better method than this?
• Creates a lot of <style> tags!

Answer 1

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}

Answer 2

Have a look at:

• Quirksmode: Change CSS
• Totally Pwn CSS with Javascript
• Is the only way to change a style to do it per-element in JavaScript? (possible duplicate)

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