javascript - 在js中设置display为block时div元素不出现

Question

我试图在计算统计数据后将其显示在表单的一侧，但是当我在 js 中将其显示从无更改为 block 时，包含此信息的 div 元素不会出现。我觉得这很奇怪，因为将 div 的显示从 css 中的 block 更改为 js 中的无效果很好。

.display_future_stats{
    display: none;
    width: auto;
    position: relative;
    right: -850px;
    top: -150px;
    /* border-radius: 20px;
    border-style: groove;
    border-color: olivedrab; */
}
<div class="display_future_stats fade-in" id="fade_in_stats">
    <strong style="font-size: large; color:blue">display</strong><br>
    <div style="font-size: medium; color:blue;">26 24</div>
</div>

let fadein = document.getElementById("fade_in_stats");
fadein.style.display="block";

下面的代码是我实际尝试做的，但我发现核心问题与在 js 中更改 style.display 有关，因为 div 当前包含的内容与我在下面添加的内容相同。

boldName.style.fontSize = "large";
boldName.textContent = document.getElementById("entername").value;
boldName.style.fontFamily = "Lucida Handwriting, Times New Roman, Cursive";
boldName.style.color = "blue";
boldName.appendChild(document.createElement("br"));
fadein.appendChild(boldName);
let statline = document.createElement("div");
statline.textContent = String(new_ppg) + " ppg, " + String(new_apg)
+ " apg, " + String(new_rpg) + " rpg, " + String(new_spg) + " spg, " + String(new_bpg) + " bpg";
statline.style.fontSize = "medium";
statline.style.color = "blue";
statline.style.fontFamily = "Courier New, Times New Roman, Serif";
statline.appendChild(document.createElement("br"));
fadein.appendChild(statline);
fadein.style.display='block';

Answer 1

显示属性没有任何问题。您在 display_future_stats 类中使用了 position: relative;。此属性只是将您的 div 定位在显示之外。删除此属性，您的代码将起作用。