如何更改动态创建的h2的字体大小div宽度[复制]

This question already has an answer here:

这个问题在这里已有答案:

how to set font size based on container size? 10 answers

如何根据容器大小设置字体大小? 10个答案

I tried bunch of options for changing font depends of div width but I didn't find a solution.
So I want to font of h2 automatically be changed when I change div width. So can someone help me how to fix this.
I create the h2

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

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

Then I insert it into div:

然后我将其插入div:

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

And then I tried to change font size using css. So I tried next options:

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

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

So can someone help me? Can I do it with css, or I should use JavaScript?

那么有人可以帮助我吗?我可以用css做,或者我应该使用JavaScript?

2 个解决方案

#1

Best to use CSS. Also, to assign the class, use the className property:

最好用CSS。另外,要分配类,请使用className属性:

h2.className = "naslov";

(setAttribute("class", ...) fails on old IE.)

(旧的IE上的setAttribute(“class”,...)失败。)

Then in the CSS:

然后在CSS中:

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

Don't repeat the same style (font-size) within the block, it makes it invalid.

不要在块中重复相同的样式(font-size),这会使其无效。

Or if you prefer not to use a class, you can apply the style directly:

或者,如果您不想使用类,则可以直接应用该样式:

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

#2

Styles defined in css will be applied as soon as you will insert element in DOM. Its better to do it with css if possible. JavaScript should be an option when something can't be done in css.

只要在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;
}

<div class="div2"></div>

#1