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.
– Simon., Commented Aug 14, 2014 at 10:23

Bhojendra Rauniyar · Accepted Answer · 2014-08-15 03:51:59Z

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, 2014 at 3:51

answered Aug 14, 2014 at 10:24

Bhojendra Rauniyar

86.1k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Simon. Over a year ago

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

Bhojendra Rauniyar Over a year ago

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.

Swapnil · Accepted Answer · 2014-08-14 10:30:38Z

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, 2014 at 10:30

Swapnil

3011 silver badge10 bronze badges

4 Comments

Simon. Over a year ago

does #content refer to my #orderHolder where the .dialog is called?

Swapnil Over a year ago

you can add elements id there instead of content.

nmz787 Over a year ago

this isn't just "JS"

Manish Agarwal Over a year ago

you solved my issue: $('.content').find('a,img,button').attr('tabindex','0');

T.J. Crowder · Accepted Answer · 2014-08-15 16:41:41Z

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, 2014 at 16:41

answered Aug 14, 2014 at 10:27

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

3 Comments

Turner Hayes Over a year ago

I don't think document.body in the style tag is what you want--did you mean "<style>body { font-family:...}</style>"?

T.J. Crowder Over a year ago

@TurnerHayes: Thank you. I wonder how tired I was when I wrote that. :-)

mic Over a year ago

Doing this with pure JavaScript: stackoverflow.com/questions/524696/…

Dan Ortega · Accepted Answer · 2021-09-30 03:46:32Z

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, 2021 at 3:46

Dan Ortega

1,91721 silver badges14 bronze badges

Comments

Sakthi Karthik · Accepted Answer · 2014-08-14 10:35:25Z

-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, 2014 at 10:35

answered Aug 14, 2014 at 10:30

Sakthi Karthik

3,1774 gold badges28 silver badges29 bronze badges

1 Comment

Sakthi Karthik Over a year ago

Most Commonly you use *{ font-family: 'Times New Roman'; } in style

Collectives™ on Stack Overflow

Change Css for All elements from JS

5 Answers 5

2 Comments

4 Comments

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

4 Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related