Change Css for All elements from JS

Question

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 have tried `document.body.style` however this does not replicate to the dialog. I assume due to jqeury's imported ui css — Simon., Aug 14 '14 at 10:23

Bhojendra Rauniyar · Answer 1 · 2014-08-15T03:51:59.823

10

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.

edited Aug 15 '14 at 03:51

answered Aug 14 '14 at 10:24

Bhojendra Rauniyar

83,432
35
168
231

As this answer was first with all other answers pointing to the same direction, i'll just comment here. I've had no success with any of the answers given. I'm sure that somewhere along the timeline, jquery ui css is blocking my functions from working correctly ( or at least applying the style). am continuing with trial & error – Simon. Aug 14 '14 at 10:43
yesterday I was gone after posting my answer and didn't answer the full coz of network problem, so sorry for that, anyway check my update please. – Bhojendra Rauniyar Aug 15 '14 at 03:47

score 3 · Answer 2 · answered Aug 14 '14 at 10:30

3

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

answered Aug 14 '14 at 10:30

Swapnil

301
1
10

does #content refer to my #orderHolder where the .dialog is called? – Simon. Aug 14 '14 at 10:34
1

you can add elements id there instead of content. – Swapnil Aug 14 '14 at 10:36
this isn't just "JS" – nmz787 Mar 31 '20 at 00:23
you solved my issue: $('.content').find('a,img,button').attr('tabindex','0'); – Manish Agarwal Apr 13 '22 at 15:28

T.J. Crowder · Accepted Answer · 2014-08-15T16:41:41.693

2

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.

edited Aug 15 '14 at 16:41

answered Aug 14 '14 at 10:27

T.J. Crowder

1,031,962
187
1,923
1,875

1

I don't think `document.body` in the style tag is what you want--did you mean "``"? – Turner Hayes Aug 15 '14 at 16:33
@TurnerHayes: Thank you. I wonder how tired I was when I wrote that. :-) – T.J. Crowder Aug 15 '14 at 16:41
Doing this with pure JavaScript: https://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript – mic Aug 26 '20 at 01:41

score 0 · Answer 4 · answered Sep 30 '21 at 03:46

0

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>'

answered Sep 30 '21 at 03:46

Dan Ortega

1,679
17
13

Sakthi Karthik · Answer 5 · 2014-08-14T10:35:25.937

-1

**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'; }

edited Aug 14 '14 at 10:35

answered Aug 14 '14 at 10:30

Sakthi Karthik

3,105
4
25
29

Most Commonly you use *{ font-family: 'Times New Roman'; } in style – Sakthi Karthik Aug 14 '14 at 10:34

Change Css for All elements from JS

5 Answers5

Linked