Question 36923 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to change font size of all paragraphs in div with Javascript? – Jquery

I’m trying to change the font size and line height of all paragraphs in my div depending on the size of the screen–for mobile responsiveness. As you can see in the example, when I attempt to change the paragraph sizes with JS, it only alters the first element. When I do it in CSS it works, just not 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>
Tags:

3

Answers


  1. 0

    The problem is the document.querySelector(). It selects just the first element found. You need to use document.querySelectorAll() to get all <p> tags.

    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>
    Login or Signup to reply.
  2. 0

    querySelector selects only the first element.
    so use querySelectorAll this will put all selected elements in an array, then you can loop through the array using for loop or for each to change all the elements.

    NOTE: make sure you give all elements the same class for that. and make sure to add the dot . when you add classes in selectors

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

    learn more about loops here

    Login or Signup to reply.
  3. 0

    Note: I’ve used a time out in both these examples to show them working.

    Solution one

    Use querySelectorAll to grab all the paragraphs and use forEach to iterate over the returned node list updating the style for each paragraph.

    setTimeout(() => {
  
  const paras = document.querySelectorAll('.textcont p');

  paras.forEach(p => {
    p.style.lineHeight = '4vw';
    p.style.fontSize = '3vw';
  });

}, 2000);
    .textcont p {
  line-height: 5vw;
  font-size: 4vw;
}
    <div class="textcont">
  <p>test</p>
  <p>test2</p>
</div>

    Solution two

    Adjust the underlying stylesheet using CSS variables instead.

    setTimeout(() => {
  
  const { style } = document.documentElement;
  
  style.setProperty('--lineHeight', '4vw');
  style.setProperty('--fontSize', '3vw');

}, 2000);
    :root {
  --lineHeight: 5vw;
  --fontSize: 4vw;
}

.textcont p {
  line-height: var(--lineHeight);
  font-size: var(--fontSize);
}
    <div class="textcont">
  <p>test</p>
  <p>test2</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search