如何用JavaScript批量修改div中所有段落的字体大小与行高？

你遇到的问题根源在于：document.querySelector('.textcont p')只会返回第一个匹配的<p>元素，所以只有第一个段落的样式被修改；而CSS选择器.textcont p会选中所有符合条件的元素，因此能批量生效。

要让JavaScript实现批量修改，只需改用document.querySelectorAll('.textcont p')获取所有目标段落，再遍历每个元素修改样式即可。

修改后的JavaScript代码 #

// 获取.textcont下的所有p元素
const textContPs = document.querySelectorAll('.textcont p');
// 遍历每个元素设置样式
textContPs.forEach(p => {
  p.style.lineHeight = "5vw";
  p.style.fontSize = "3vw";
});

如果需要兼容不支持forEach的旧环境，也可以用传统for循环：

const textContPs = document.querySelectorAll('.textcont p');
for (let i = 0; i < textContPs.length; i++) {
  textContPs[i].style.lineHeight = "5vw";
  textContPs[i].style.fontSize = "3vw";
}

更优的响应式方案（推荐） #

其实移动端响应式样式更推荐用CSS媒体查询实现，无需JavaScript介入，代码更简洁高效：

.textcont p {
  font-size: 4vw;
  line-height: 5vw;
}

/* 针对移动端屏幕调整样式 */
@media (max-width: 768px) {
  .textcont p {
    font-size: 3vw;
    line-height: 5vw;
  }
}

对应的HTML结构保持不变：

<div class="textcont">
  <p>test</p>
  <p>test2</p>
</div>

内容的提问来源于stack exchange，提问作者Ethan Cotler