Question

我有一个父元素，在这种情况下是div元素，并且在此div中添加了动态内容。因此，我永远不知道div内是否可能有段落，标题，div，跨度。

我想这样做，以便让用户将文本的大小增加到特定父div内的所有内容。

虽然内容（html标记）不能是以下内容，但不确定是否可以做到这一点：

我当前的代码如下：

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

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

这适用于更改子div中文本的字体大小，但不适用于段落或标题。

有什么想法要实现吗？

Answer 1

设置标签的字体大小，而不是通过ID为单个元素设置字体大小。

请参阅此https://stackoverflow.com/a/41188189/11141189

Answer 2

对于此用例，您可以使用javascript动态地在CSS中使用em单元。

相对长度单位指定相对于另一个长度属性的长度。 em相对于元素的字体大小（2em表示当前字体大小的2倍）

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>

Answer 3

向每个子元素添加一个类，并从父元素继承字体大小。然后，您可以仅更改仅父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>

如果您特别需要为子元素设置字体大小，则可以遍历所有子元素并更改字体大小：

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>

Answer 4

最好的解决方案是在em中使用字体，如果您知道将在父组件中显示的标签，则可以使用类似这样的

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

此后，您可以指定父组件的字体大小。子组件将根据父组件的字体大小值自行调整大小。

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

请注意，我使用的是样本值。您可以根据自己的值进行更改。

如何更改父div元素中所有子元素的字体大小

4 个答案: