CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Simon.
Simon.

Reputation: 1896

Change Css for All elements from JS

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?

Upvotes: 3

Views: 13710

Answers (5)

Dan Ortega
Dan Ortega

Reputation: 1899

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

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1073978

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.

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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.

Upvotes: 10

Sakthi Karthik
Sakthi Karthik

Reputation: 3169

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

Upvotes: -1

Swapnil
Swapnil

Reputation: 301

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

Upvotes: 3

Related Questions