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?

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?

• javascript
• jquery
• html
• css

• I have tried document.body.style however this does not replicate to the dialog. I assume due to jqeury's imported ui css – Simon. Commented Aug 14, 2014 at 10:23

5 Answers 5

jQuery:

$('*').css('font-family','Bookman Old Style');

javascript:

document.querySelectorAll('*').style.fontFamily = 'Bookman Old Style';

Update:

Actually you need to iterate over all element when you use querySelectorAll:

var el = document.querySelectorAll('*');
for(var i=0;i<el.length;i++){
  el[i].style.fontFamily = 'Bookman Old Style';
}

But this is unnecessary to iterate over all element while using asterisks selector, you can just use querySelector:

document.querySelector('*').style.fontFamily='Bookman Old Style';

But actually if you set font-family to the body your font will be inherited to all element, so rather than other thing just apply to the body.

You may need to make it as important style: Also if any other font-family is there then please remove it. try the below code

In CSS:

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

In jquery:

$('#content').find('*').css("font-family","'Bookman Old Style'");

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.

None of the previous answers worked for me. But this:

document.head.innerHTML = document.head.innerHTML + '<style type="text/css">*{font-family: Georgia !important }</style>'

**Apply following methods **

1.jQuery $('*').css('fontFamily','Times New Roman');

2.Java script document.querySelectorAll('*').style.fontFamily = 'Times New Roman';

3.Css *{ font-family: 'Times New Roman'; }