javascript - 在 div 上切换 "display: none"和 "display: block"时呈现错误

Question

我试图在点击第一个按钮后显示两个新按钮。为此，我将要显示的两个按钮设置为 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>

CSS:

.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;
}

JavaScript:

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;
}

Answer 1

This works but a weird display bug occurs where initially the buttons are much larger than they should be, and quickly return to the size they are supposed to be.

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

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

这是一个 fiddle ，可以重现您想要实现的目标:

// Script.js

// Load all the elements you need to operate on
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');

// Hide all static elements, and display the edit ones
function setEditMode() {
  inputField.value = title.innerHTML;

  for (const element of staticElements) {
    element.classList.add('hidden');
  }
  
  for (const element of editElements) {
    element.classList.remove('hidden');
  }
}

// Reverse of above function
function setStaticMode() {
  for (const element of staticElements) {
    element.classList.remove('hidden');
  }
  
  for (const element of editElements) {
    element.classList.add('hidden');
  }
}

// Call above, but before update static value
function save() {
  title.innerHTML = inputField.value;
  setStaticMode();
}

/* style.css */

#container {
  display: flex;
}

#container > * {
  margin: 5px;
}

.editable {
  font-size: 20px;
  color: #AAAAAA;
}

.button {
  border-style: solid;
  border-color: lightblue;
  border-width: 1px;
  border-radius: 3px;
  padding: 3px;
  cursor: pointer;
}

.editActions {
  display: flex;
}

.editActions > * {
  margin: 0 5px;
}

.hidden {
  display: none;
}

<!—-index.html—->

<div id="container">
  <div class="title static">Enter a title</div>
  <input type="text" class="hidden edit">
  <div class="button static" onClick="setEditMode()">
    edit
  </div>
  <div class="hidden editActions edit">
    <div class="button" onClick="setStaticMode()">
      cancel
    </div>
    <div class="button" onCLick="save()">
      save
    </div>
  </div>
</div>

看，在这里，我们没有从 javascript 修改 DOM，一切看起来都很清楚，表现符合预期。

如果您必须从 javascript 构建 HTML，请谨慎操作，并尽可能偶尔使用。您可以从此处调整您的代码，以查看更改是否有效。