Javascript 切换时出现渲染错误"；显示：无“；及；显示：block"；关于div

我试图在单击第一个按钮后显示两个新按钮。为此，我将要显示的两个按钮设置为

display:none

。单击初始按钮时，它会将其显示切换为无，然后将其他两个按钮显示为

display:block

这是可行的，但是出现了一个奇怪的显示错误，最初按钮比应该的大很多，并且很快恢复到应该的大小

我已经附上了图片来展示这一点，但由于我的声誉，无法嵌入

屏幕截图1

屏幕截图2

屏幕截图3

HTML

<div class = "container">
   <div class = "row p-0"> 
      <div class = "col text-field-wrapper m-0 p-0"></div>
      <div class = "col button-field-wrapper"></div>
   </div>
</div>

JavaScript:

.button-field-wrapper {
    font-size: 12px; 
    margin: 18px 0 0 0; 
    height: 36px; 
    display: block;
}
.hide {
    display: none
}
.text-field-wrapper: {
    height: 56px; 
    display: block;
}

constructor() {
    super();
    this.active = false;
    this.default = true;
    this.maxWidth = 200;
    this.error = false; 
    this.overflow = false; 
    this.getWidth();

    this.inputText = "Enter A Title";
    this.appendChild(template.content.cloneNode(true));


    this.tf_wrapper = this.getElementsByClassName("text-field-wrapper")[0];
    this.bt_wrapper = this.getElementsByClassName("button-field-wrapper")[0];

    this.renderInputField.bind(this)(this.tf_wrapper);
    this.renderButtonField.bind(this)(this.bt_wrapper);
    this.renderOptionField.bind(this)(this.bt_wrapper);
    this.optionWrapper.setAttribute("class", "hide", "option-wrapper")


} 

renderOptionField(bt_wrapper) {
    this.optionWrapper = document.createElement("DIV");
    this.optionWrapper.setAttribute("class", "option-wrapper");
    bt_wrapper.appendChild(this.optionWrapper);

    this.cancelButton = document.createElement("Button");
    this.cancelButton.setAttribute("class", "cancel-button");
    this.cancelButton.addEventListener("click", 
    this.onCancel.bind(this))

    this.closeIcon = document.createElement("object");
    this.closeIcon.setAttribute("type", "image/svg+xml");
    this.closeIcon.setAttribute("class", "close-icon");
    this.closeIcon.setAttribute("data", "Close.svg")
    this.cancelButton.appendChild(this.closeIcon)
    this.cancelButton.innerHTML += "Cancel";

    this.saveButton = document.createElement("Button");
    this.saveButton.setAttribute("class", "save-button");
    this.saveButton.addEventListener("click", this.onSave.bind(this))
    this.saveIcon = document.createElement("object");
    this.saveIcon.setAttribute("type", "image/svg+xml");
    this.saveIcon.setAttribute("class", "save-icon");
    this.saveIcon.setAttribute("data", "Check.svg")
    this.saveButton.appendChild(this.saveIcon)
    this.saveButton.innerHTML += "Save";
    this.optionWrapper.appendChild(this.cancelButton);
    this.optionWrapper.appendChild(this.saveButton);        
}

onEdit() {
    this.editWrapper.setAttribute("class", "edit-wrapper hide")
    this.optionWrapper.setAttribute("class", "option-wrapper")
    this.textField.setAttribute("class", "text-field-active single- 
    line")
    this.active = true;
}

这是可行的，但是出现了一个奇怪的显示错误，最初按钮比应该的大很多，并且很快恢复到应该的大小

即使在将项目附加到容器中时已完全创建项目，浏览器也需要重新计算流，以使元素适合内部。执行此操作时，您的项目最初可能没有设置正确的值，这有时会导致奇怪的行为

创建这样的元素不是一种有效的方法。您最好编写包含所有内容的HTML，包括要显示的元素和要隐藏的元素，并随时更改它们的属性。您将避免冗长、难以维护的javascript代码，同时获得更稳定的行为

这里有一把小提琴，可以重现你想要达到的目标：

//Script.js
//加载所有需要操作的元素
const container=document.querySelector（“#container”）；
const staticElements=container.querySelectorAll（'.static'）；
const editElements=container.querySelectorAll（'.edit'）；
const inputField=container.querySelector（'input'）；
const title=container.querySelector（'.title'）；
//隐藏所有静态图元，并显示编辑图元
函数setEditMode（）{
inputField.value=title.innerHTML；
for（静态元素的常量元素）{
element.classList.add（'hidden'）；
}
for（editElements的常量元素）{
element.classList.remove（'hidden'）；
}
}
//上述功能的反向
函数setStaticMode（）{
for（静态元素的常量元素）{
element.classList.remove（'hidden'）；
}
for（editElements的常量元素）{
element.classList.add（'hidden'）；
}
}
//调用上面的函数，但在更新静态值之前
函数save（）{
title.innerHTML=inputField.value；
setStaticMode（）；
}

/*style.css*/
#容器{
显示器：flex；
}
#容器>*{
保证金：5px；
}
.可编辑{
字体大小：20px；
颜色：#AAAAA；
}
.按钮{
边框样式：实心；
边框颜色：浅蓝色；
边框宽度：1px；
边界半径：3px；
填充：3倍；
光标：指针；
}
.编辑行动{
显示器：flex；
}
.editActions>*{
利润率：0.5px；
}
.隐藏{
显示：无；
}

输入标题
编辑
取消
拯救

这是建议您首先为静态页面（不含JavaScript）构建web应用程序的原因之一，然后扩展功能以结合JavaScript以实现动态性

例如，如果您遵循上述建议，那么浏览器的html解析器将在您通过JavaScript应用任何效果之前，首先计算所有

DOM

容器的属性。如果你不这样做，那么这种不可预测的行为是意料之中的

---

具体地说，在您的代码中，在开始附加或操作它的元素之前，不需要确保

DOM

已经准备好。关于如何使用vanilla JavaScript实现这一点，请参见本文。确保

DOM

准备就绪后，您可以使用JavaScript隐藏要动态显示的元素，并添加要用于使其可见的事件侦听器。

如果您可以添加

HTML

，在我们无法运行此程序来复制或检查它时，这将非常有用。您好，Towkir，这是一个javascript网络组件，我使用window.customElements.define在HTML中使用，我添加了我使用的HTML，但没有太多。您好，Charlietfl，抱歉，这是我的第一篇文章，我将从现在开始尝试遵循该标准。非常感谢。我还能够通过使用svg的图像而不是对象来解决这个问题。问题似乎来自于我试图添加到按钮的图标，因为如果没有它们，它将正确加载。谢谢你给我的关于尽可能多地使用HTML的建议，我以后一定会用的。