I have a parent element which in this case is a div element and within this div has dynamic content added. So I never know if within the div there could be paragraphs, headings, divs, spans.

I want to make it so I can let the user increase the size of the text to all content within a particular parent div.

Is this possible to do without knowing the content for sure, though the content (html tags) cannot be something that is not: paragraph, heading, divs, span?

My current code looks like following:

const nodes = document.querySelectorAll('#content');

nodes.forEach(a => {
      a.style.fontSize = newSize + "%";
});

This works for changing font size of text within child divs, but doesn't work for paragraphs or heading.

Any idea how to achieve this?

I have a parent element which in this case is a div element and within this div has dynamic content added. So I never know if within the div there could be paragraphs, headings, divs, spans.

I want to make it so I can let the user increase the size of the text to all content within a particular parent div.

Is this possible to do without knowing the content for sure, though the content (html tags) cannot be something that is not: paragraph, heading, divs, span?

My current code looks like following:

const nodes = document.querySelectorAll('#content');

nodes.forEach(a => {
      a.style.fontSize = newSize + "%";
});

This works for changing font size of text within child divs, but doesn't work for paragraphs or heading.

Any idea how to achieve this?

• javascript
• html
• css

• 1 querySelectorAll for id doesnot make sense. id is always unique in page – Maheer Ali Commented May 13, 2019 at 11:49
• mind using jquery? and which html tags do you want to update? – sid Commented May 13, 2019 at 11:51
• 1 I tried adding you code to a snippet, but it all seems to work fine, for any kind of html element. I'm guessing something about what I've done here doesn't match up to what you have, could you illustrate what that is? jsfiddle/yxnc6osd – OliverRadini Commented May 13, 2019 at 11:53
• @OliverRadini u right, it works on ur links, and tried with same html I have still works, is it that I am using react somehow is not working? – Mizlul Commented May 13, 2019 at 12:01
• @Mizlul It could be that using react is confusing the process slightly, the the code you're using is accessing the api directly, so the fact that it es from react ought not to matter too much. My guess would be that there are other styles on the elements in question already, but it's difficult to say too much without seeing all the code – OliverRadini Commented May 13, 2019 at 12:11

5 Answers 5

The best solution would be to use the font in em and if you know the tags which are going to appear inside the parent ponent, you can use something like this

.parent-ponent {
 p, div, span {
  font-size: .8em;
 }
}

After this, you can specify the font size of the parent ponent. Child ponents would resize themselves based on the font size value of the parent ponent.

.parent-ponent {
  font-size: 14px;
}

Note that, I am using sample values. You can change them as per your values.

You can use em unit in css for this use case dynamically using javascript.

Relative length units specify a length relative to another length property. em is Relative to the font-size of the element (2em means 2 times the size of the current font)

p {
  font-size: 16px;
  line-height: 2em;
}

div {
  font-size: 30px;
  border: 1px solid black;
}

span {
  font-size: 0.5em;
}

<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<div>The font-size of the div element is set to 30px. <span>The span element inside the div element has a font-size of 0.5em, which equals to 0.5x30 = 15px</span>.</div>

Set the font size for tag instead of setting the font size for a single element by ID.

Refer this https://stackoverflow./a/41188189/11141189

Add a class to each child element and inherit the font size from parent element. Then you can simply change the font size of only parent div.

const div = document.getElementById("myContentDiv")
div.style.fontSize = "30px"; //getNewFontSizeSomewhere();

.font-inherit {
  font-size: inherit;
}

<div id="myContentDiv">
  <span class="font-inherit">My</span>
  <p class="font-inherit">new</p>
  <h1 class="font-inherit">text</h1>
</div>

If you specifically need to set font size for child elements you could loop through all children and change the font size:

const div = document.getElementById("myContentDiv");
let children = div.getElementsByTagName("*");
for (let item of children) {
    item.style.fontSize = "30px"; //getNewFontSizeSomewhere();
}

<div id="myContentDiv">
  <span>
    <p>My</p>
  </span>
  <p>new</p>
  <h1>text</h1>
</div>

you can do this with css for selected elements

    #myContentDiv ,#myContentDiv ~ div,p,span  {
      font-size: 30px;
    }

for all elements

    #myContentDiv ,#myContentDiv ~ *  {
      font-size: 30px;
    }