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?
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.
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
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'");
** 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';
}