本文详细介绍了如何使用javascript为html `div` 元素内的所有段落（`
` 标签）动态调整字体大小和行高，以实现响应式布局。文章指出 `document.queryselector()` 仅选择首个匹配元素的问题，并提供了使用 `document.queryselectorall()` 结合 `foreach` 循环遍历并批量修改样式的正确方法，确保所有目标元素都能得到样式更新。
在现代网页设计中，为了适应不同屏幕尺寸（特别是移动设备），动态调整文本样式，如字体大小和行高，是实现响应式布局的关键一环。当需要批量修改某个容器内所有特定元素的样式时，javaScript提供了强大的能力。然而，初学者常会遇到一个常见的陷阱，导致样式只应用于第一个匹配的元素而非全部。
理解 querySelector 的局限性
在javascript中，document.querySelector() 方法是一个非常方便的dom选择器。它接受一个css选择器作为参数，并返回文档中第一个匹配该选择器的元素。这意味着，如果你在一个包含多个 <p> 标签的 div 中使用 document.querySelector(‘.textcont p’)，它只会返回 textcont 类 div 内的第一个 <p> 元素。
例如，考虑以下html结构：
<div class="textcont"> <p>这是第一个段落。</p> <p>这是第二个段落。</p> <p>这是第三个段落。</p> </div>
如果你尝试使用以下JavaScript代码来修改所有段落的样式：
立即学习“Java免费学习笔记（深入）”；
const textContP = document.querySelector('.textcont p'); textContP.style.lineHeight = "5vw"; textContP.style.fontSize = "3vw";
你会发现只有“这是第一个段落。”的字体大小和行高发生了变化，而其他段落保持不变。这是因为 textContP 变量只引用了第一个 <p> 元素。
解决方案：querySelectorAll 与遍历
要解决这个问题，你需要使用 document.querySelectorAll() 方法。与 querySelector() 不同，document.querySelectorAll() 返回一个 nodeList 对象，其中包含所有匹配指定CSS选择器的元素。由于 NodeList 是一个类数组对象，你可以使用 forEach 方法来遍历其中的每一个元素，并分别应用样式。
以下是实现这一目标的正确JavaScript代码：
document.querySelectorAll('.textcont p').forEach(p => { p.style.lineHeight = "5vw"; p.style.fontSize = "3vw"; });
代码解释：
- document.querySelectorAll(‘.textcont p’): 这会选择所有类名为 textcont 的 div 元素内部的所有 <p> 标签，并返回一个包含这些元素的 NodeList。
- .forEach(p => { … }): 这是一个 NodeList 的 forEach 方法，它会遍历 NodeList 中的每一个元素。在每次迭代中，当前的 <p> 元素会被赋值给变量 p。
- p.style.lineHeight = “5vw”;: 这会设置当前 p 元素的行高为 5vw（视口宽度的5%）。
- p.style.fontSize = “3vw”;: 这会设置当前 p 元素的字体大小为 3vw（视口宽度的3%）。
通过这种方式，JavaScript会依次访问 NodeList 中的每一个段落元素，并对其应用所需的样式，从而实现批量修改。
完整示例
结合HTML和JavaScript，一个完整的示例将如下所示：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态调整段落样式</title> <style> /* 可以选择性地提供一个基础CSS样式，或用于调试 */ body { font-family: Arial, sans-serif; margin: 20px; } .textcont { border: 1px solid #ccc; padding: 15px; margin-bottom: 20px; } /* 初始CSS样式，会被js覆盖 */ .textcont p { font-size: 16px; /* 默认字体大小 */ line-height: 1.5; /* 默认行高 */ margin-bottom: 10px; } </style> </head> <body> <div class="textcont"> <p>这是一个测试段落，初始字体大小为16px，行高为1.5。通过JavaScript，它的样式将被动态调整。</p> <p>这是另一个测试段落。同样，它的样式也将被JavaScript更新，以适应响应式布局的需求。</p> <p>第三个段落在此。所有属于 '.textcont' 类的段落都将受到影响，实现统一的视觉效果。</p> </div> <script> // 当文档加载完成后执行 document.addEventListener('DOMContentLoaded', () => { // 选择所有 '.textcont' 内部的 '<p>' 标签 document.querySelectorAll('.textcont p').forEach(p => { // 设置行高和字体大小，使用vw单位实现响应式 p.style.lineHeight = "5vw"; p.style.fontSize = "3vw"; }); }); </script> </body> </html>
在上面的示例中，当页面加载完成后，JavaScript代码会执行，并动态地将所有 div.textcont 内部的 <p> 标签的 line-height 和 font-size 设置为基于视口宽度的响应式值。
注意事项与最佳实践
- style 属性与 setAttribute： 在JavaScript中，直接通过 element.style.propertyName 来修改样式是推荐的做法。这会直接修改元素的内联样式，优先级较高。而 element.setAttribute(“style”, “…”) 则是设置整个 style 属性字符串，会覆盖之前所有内联样式，使用时需谨慎。对于单个属性的修改，element.style.propertyName 更为灵活和安全。
- 性能考量： 对于少量元素，querySelectorAll 和 forEach 的性能开销可以忽略不计。但如果DOM中存在大量元素，且需要频繁修改样式，可以考虑使用CSS类切换 (element.classlist.add/remove) 或CSS变量 (document.documentElement.style.setProperty(‘–my-var’, ‘value’)) 结合媒体查询等更优化的方案。
- CSS与JavaScript的配合： 对于静态的、基于视口宽度的样式调整，优先考虑使用CSS媒体查询 (@media)。只有当样式需要基于更复杂的逻辑（例如用户交互、数据动态加载等）进行调整时，才应该使用JavaScript。
- 事件监听： 如果样式调整需要根据屏幕尺寸变化而动态发生，你需要监听 window.resize 事件，并在事件触发时重新执行样式调整逻辑。但要注意事件的节流（throttle）或防抖（debounce）以避免性能问题。
总结
通过 document.querySelectorAll() 方法结合 forEach 循环，JavaScript能够有效地批量修改DOM中多个元素的样式。理解 querySelector 和 querySelectorAll 之间的区别是掌握DOM操作的关键一步。在实现响应式设计时，合理运用这些工具，能够为用户提供更佳的视觉体验。始终记住，选择最适合当前场景的DOM操作方法，并考虑性能和维护性，是编写高质量前端代码的重要原则。