Clever Geek Handbook

Change css for all elements from JS

I am trying to change the jQuery dialog font family from a small display settings panel. I've tried it all 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 is the div that contains the contents of the dialog)

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

in the .css file works great and the overall effect is what I get after.

So how do you select all the elements to style in javascript?

+3


source to share


4 answers


I found

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

in the .css file works great and the overall effect is what I get after.

In this case, since you are apparently not applying font-family

to more specific selectors, your best bet is to add an element style

to the document with this rule:

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

Or perhaps:



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

... if they all inherit their style from body

.

This way, it applies all over the place as well as new elements that you add afterwards.

0


source


JQuery

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

JavaScript:

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

Update:

You actually need to iterate over all the elements when using querySelectorAll:



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

But there is no need to iterate over all the elements when using the asterisk selector, you can just use the querySelector:

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

But in fact, if you set the font-family to body, your font will be inherited to the whole element, so instead of just applying it to the body, it will be

+6


source


You may need to do this as an important style: Also, if there are other font families, please remove them. try the below code

In CSS:

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

In jquery:

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


source


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

0


source






More articles:


All Articles