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

Question

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?

`querySelectorAll` for id doesnot make sense. `id` is always unique in page — Maheer Ali, May 13 '19 at 11:49
mind using jquery? and which html tags do you want to update? — sid, May 13 '19 at 11:51
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? https://jsfiddle.net/yxnc6osd/ — OliverRadini, May 13 '19 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, May 13 '19 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 comes 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, May 13 '19 at 12:11
have no idea, https://jsfiddle.net/931q8Lap/3/ this works and I have same code within my react component where it doesnt really work , works only for divs changing size. — Mizlul, May 13 '19 at 12:20

score 3 · Answer 1 · answered May 13 '19 at 11:58

3

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 component, you can use something like this

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

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

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

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

answered May 13 '19 at 11:58

Himanshu Mishra

226
2
4

1

If you're not using sass: `.parent-component p, .parent-component div, .parent-component span {...}`. And if you just want to set the direct children: `.parent-component>p, .parent-component>div, .parent-component>span {...}` – julianobrasil May 13 '19 at 12:07

score 0 · Answer 2 · answered May 13 '19 at 11:53

0

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

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

answered May 13 '19 at 11:53

Bhanwarlal Chaudhary

402
6
20

score 0 · Accepted Answer · answered May 13 '19 at 11:55

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>

Cray · Answer 4 · 2019-05-13T12:06:59.430

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>

score 0 · Answer 5 · answered Jan 03 '22 at 17:20

0

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;
    }

answered Jan 03 '22 at 17:20

Akram Elhaddad

194
3
7

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

5 Answers5