How to change font size of all child elements within a parent div element

Issue

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?

Solution

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>

Answered By - Priyesh Diukar