从 JS 更改所有元素的 Css

Question

我正在尝试从一个小的显示设置面板更改 jQuery 对话框的字体系列。 我已经尝试了所有这些都无济于事：

$('#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 为包含对话框内容的 div）

我找到了
*{ font-family: 'Bookman Old Style'; }

在.css文件中效果很好，整体效果就是我所追求的。

那么，如何在 javascript 中选择所有元素进行样式设置？

Answer 1

jQuery:

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

javascript：

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

更新：

其实在使用 querySelectorAll 时需要遍历所有元素：

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

但是在使用星号选择器时没有必要遍历所有元素，您可以使用 querySelector：

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

---

但实际上，如果您将 font-family 设置为正文，则您的字体将被继承到所有元素，因此仅适用于正文而不是其他东西。

Answer 2

您可能需要将其设为重要样式： 此外，如果有任何其他字体系列，请删除它。 试试下面的代码

在 CSS 中：

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

在 jquery 中：

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

Answer 3

我找到了

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

在.css文件中效果很好，整体效果就是我所追求的。

在这种情况下，由于您显然没有将font-family 应用于更具体的选择器，因此最好的办法是使用该规则将style 元素添加到文档中：

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

或者可能：

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

...如果他们都继承了body 的风格。

这样，它适用于整个过程，也适用于您之后添加的新元素。

Answer 4

以前的答案都不适合我。 但是这个：

document.head.innerHTML = document.head.innerHTML + '<style type="text/css">*{font-family: Georgia !important }</style>'

Answer 5

**应用以下方法**

---

1.jQuery $('*').css('fontFamily','Times New Roman');

2.Java脚本 document.querySelectorAll('*').style.fontFamily = 'Times New Roman';

3.CSS *{ font-family: 'Times New Roman'; }