javascript 访问某个 div 类并为所有这些类设置字体系列答案

【问题标题】：javascript to access a certain div class and set font Family for all of themjavascript 访问某个 div 类并为所有这些类设置字体系列
【发布时间】：2021-06-12 03:37:03
【问题描述】：

我的标记文件中有多个<div class="collapsible-header"> 类，我想知道是否可以使用javascript 来获取带有该标记的所有元素并将字体系列设置为Roboto 这是文件的示例部分

<!DOCTYPE html>
<html lang="en" xmlns:width="http://www.w3.org/1999/xhtml">
<head>
<!--libraries and references-->
</head>
<body>
 <div class="collapsible-header" >
     <span class="material-icons" style="font-size: 50px">
developer_mode
      </span>
     <span style="text-align: right">Cross Platform</span>
</div>
      

<div class="collapsible-body"><span>With Java's Virtual Machine, any program written in Java can be ported to Windows, Solaris, Linux, macOS and
          ran with success.</span></div>

<script>
<!--Code to get all tags with that class and set font to Roboto-->
</script>

【问题讨论】：

这当然是可能的。您遇到的问题是什么？
@CodeTiger，您要定位并应用“Font-Family”Roboto 的标签或类？
@Riyaz Khan，所有课程都带有collapsible-header
@Emiel Zuuriber，这些标签太多了，我无法保持样式，如果可能的话，我只想用 js 遍历所有标签
为什么不直接使用 CSS？循环遍历元素并更改它们的字体似乎不是一个好的解决方案。

标签： javascript html font-family

【解决方案1】：

尝试关注

var all = document.getElementsByClassName('collapsible-header');
for (var i = 0; i < all.length; i++) {
  all[i].style.fontFamily = 'Roboto';
}

【讨论】：

谢谢你，我真的很希望有这样的东西，让我测试一下
它成功了，呵呵，谢谢，我得到了大约一千个带有那个标签的段落，你搞定了
完美，如果有效，请标记为解决方案；）
完成了，系统说一分钟后接受

【解决方案2】：

您可以使用document.querySelectorAll()从页面中选择多个元素

const headers = document.querySelectorAll('.collapsible-header');

这将返回一个可以循环的可迭代对象。对于每个找到的元素，将style.fontFamily 属性设置为字符串'Roboto'。这将设置该元素的内联样式。

for (const header of headers) {
  header.style.fontFamily = 'Roboto';
}

但是，内联样式很难使用，因为它们往往需要覆盖 !important 语句。首选方法是编写一个指定字体系列的类..

.font-roboto {
  font-family: 'Roboto', sans-serif;
}

..并将该类添加到查询找到的每个元素中。

for (const header of headers) {
  header.classList.add('font-roboto');
}

但是，难道不能像这样添加 CSS 吗？这样做也可以，但不必使用 JavaScript。

.collapsible-header {
  font-family: 'Roboto', sans-serif !important;
}

注意：!important 语句不是强制性的，但我猜您在覆盖样式时遇到了问题，因为它的特殊性。

【讨论】：

是的，确切地说，文档包含非常可能带有该类的标签，所以我只需要一个快捷方法来设置字体
快捷方式是什么意思，应该是什么样的？

【解决方案3】：

您可以使用document.querySelectorAll 获取所有类元素，然后循环遍历它以应用 FontFamily 样式“Roboto”，如下所示：

window.onload = (event) => {
  var allCollapseHeaders = document.querySelectorAll('.collapsible-header');
  
  allCollapseHeaders.forEach(header => {
    header.style.fontFamily = "Roboto"
  })

};

<!DOCTYPE html>
<html lang="en" xmlns:width="http://www.w3.org/1999/xhtml">
<head>
<!--libraries and references-->
</head>
<body>
 <div class="collapsible-header" >
     <span class="material-icons" style="font-size: 50px">
developer_mode
      </span>
     <span style="text-align: right">Cross Platform</span>
</div>
      

<div class="collapsible-body"><span>With Java's Virtual Machine, any program written in Java can be ported to Windows, Solaris, Linux, macOS and
          ran with success.</span></div>

【讨论】：