Change Css for All elements from JS

Issue

I'm trying to change jQuery dialog's font-family from a little display settings panel. I've tried all of these to no avail:

$('#orderHolder').style.fontFamily='Bookman Old Style';
$('.ui-dialog-content').style.fontFamily='Bookman Old Style';
$('.ui-widget-content').style.fontFamily='Bookman Old Style';
$('#orderHolder').css("font-family", "Bookman Old Style';
$('*').css('font-family', 'Bookman Old Style'); //this is what I'm after 

(#orderHolder being the div that contains the dialog content)

I found
*{ font-family: 'Bookman Old Style'; }

in the .css file works fine, and the overall effect is what I am after.

So, How do you select all elements for styling in javascript?

Solution

I found

*{
   font-family: 'Bookman Old Style';
}

in the .css file works fine, and the overall effect is what I am after.

In that case, since you apparently aren't applying font-family to more specific selectors, your best bet is to add a style element to the document with that rule:

$("<style>* { font-family: 'Bookman Old Style'; }</style>").appendTo("head");

Or possibly:

$("<style>body { font-family: 'Bookman Old Style'; }</style>").appendTo("head");

...if they all inherit their style from body.

That way, it applies throughout, and also to new elements you add afterward.

Answered By - T.J. Crowder