如何使用 Javascript 更改 div 中所有段落的字體大小？

Question

我正在嘗試根據屏幕大小更改 div 中所有段落的字體大小和行高 - 以實現移動響應。 正如您在示例中看到的，當我嘗試使用 JS 更改段落大小時，它只會更改第一個元素。 當我在 CSS 中執行此操作時，它可以工作，而不是 JS。

 const textContP = document.querySelector('.textcont p'); textContP.setAttribute("style", "line-height: 5vw"); textContP.style.fontSize = "3vw";

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

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

Answer 1

問題是document.querySelector() 。 它只選擇找到的第一個元素。 您需要使用document.querySelectorAll()來獲取所有<p>標簽。

 document.querySelectorAll('.textcont p').forEach(p => { p.style.lineHeight = "5vw"; p.style.fontSize = "3vw"; })

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

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

Answer 2

使用querySelectorAll而不是querySelector 。

 const textContP = document.querySelectorAll('.textcont p'); textContP.setAttribute("style", "line-height: 5vw"); textContP.style.fontSize = "3vw";

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

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

Answer 3

querySelector只選擇第一個元素。 所以使用querySelectorAll這會將所有選定的元素放入一個數組中，然后您可以使用for loop或for each循環遍歷數組以更改所有元素。

注意：確保為所有元素提供相同的 class。 並確保添加點. 當您在選擇器中添加類時

在此處了解有關循環的更多信息