如何更改动态创建的 h2 的字体大小取决于 div 宽度 [重复]答案

【问题标题】：How to change font size of dynamically created h2 depeands of div width [duplicate]如何更改动态创建的 h2 的字体大小取决于 div 宽度 [重复]
【发布时间】：2017-01-14 02:02:58
【问题描述】：

我尝试了一堆选项来更改字体取决于 div 宽度，但我没有找到解决方案。
所以我想在更改 div 宽度时自动更改 h2 的字体。所以有人可以帮我解决这个问题。
我创建了 h2

var h2 = document.createElement('h2');
h2.innerHTML= "GET AN ESTIMATE OVER VIDEO CHAT";
h2.setAttribute("class", "naslov");

然后我把它插入到div中：

div2.appendChild(h2) + "\n";

然后我尝试使用 css 更改字体大小。所以我尝试了下一个选项：

h2{
font-size: 80%;
font-size: 1vw;
font-size: 1vh;
// and few more options
}

那么有人可以帮助我吗？我可以用 css 做，还是应该用 JavaScript？

【问题讨论】：

你在尝试那种东西吗？ codepen.io/gc-nomade/pen/xEbraw（应该需要javascript，并且还应该设置最小和最大字体大小值以保持文本可读......）

标签： javascript html css

【解决方案1】：

一旦您在 DOM 中插入元素，就会应用在 css 中定义的样式。如果可能的话，最好用css来做。当无法在 css 中完成某些事情时，JavaScript 应该是一种选择。

var h2 = document.createElement('h2');
h2.innerHTML= "GET AN ESTIMATE OVER VIDEO CHAT";
h2.setAttribute("class", "naslov");

var div2 = document.querySelector('.div2');
div2.appendChild(h2) + "\n";

h2.naslov {
  font-size: 200%;
  color: blue;
}

&lt;div class="div2"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

最好使用 CSS。此外，要分配类，请使用 className 属性：

h2.className = "naslov";

（setAttribute("class", ...) 在旧 IE 上失败。）

然后在 CSS 中：

.naslov {
    font-size: 14px; /* or whatever */
}

不要在块内重复相同的样式（font-size），这会使它无效。

或者如果你不想使用类，你可以直接应用样式：

h2.style.fontSize = "14px"; // or whatever

【讨论】：

看你可能没理解问题，取决于 div 的宽度，我想获取字体大小，如果 div 是 200px，例如字体是 16px。
@MilanPoznan：我没有在问题中看到这些信息。我想“取决于 div 宽度”可能会涵盖它；哇，当你做一些奇怪的事情时，你想强调一下吗？
@MilanPoznan：这已经被问及回答了。