CODEWITHSUNDEEP
javascripthtmlcss
Mizlul
Mizlul

Reputation: 2290

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

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?

Upvotes: 1

Views: 11007

Answers (5)

Akram Elhaddad
Akram Elhaddad

Reputation: 314

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

Upvotes: 0

Cray
Cray

Reputation: 2850

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>

Upvotes: 0

Himanshu Mishra
Himanshu Mishra

Reputation: 256

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.

Upvotes: 4

Priyesh Diukar
Priyesh Diukar

Reputation: 2142

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>

Upvotes: 0

Bhanwarlal Chaudhary
Bhanwarlal Chaudhary

Reputation: 452

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

Upvotes: 0

Related Questions