为什么我不能通过 Javascript 设置 'margin: 0 auto' 但可以设置其他 CSS 属性？

Question

我有一个弹性框和一个下拉菜单，用户可以在其中选择是否希望弹性框中的项目左对齐（默认 - 未设置边距值）或居中（边距：0 自动）。

更改下拉选择会触发一个函数，该函数使用以下代码更改 ID 为“PhotoBox”的 div 的边距属性：

alignmentChange(alignment) {
  switch(alignment) {
    case "Left": document.getElementById('PhotoBox').style.margin = '';
    case "Centre": document.getElementById('PhotoBox').style.margin = '0 auto';
  }
}

我也尝试过使用 .removeProperty：

alignmentChange(alignment) {
  switch(alignment) {
    case "Left": document.getElementById('PhotoBox').style.removeProperty('margin');
    case "Centre": document.getElementById('PhotoBox').style.margin = '0 auto';
  }
}

但两者都不起作用 - 例如，内容不会改变屏幕上的对齐方式。但是，我通过在边距更改后弹出一个测试（警报）语句对它们进行了测试，以提醒“PhotoBox”的新边距样式 - 并且警报确实反映了边距样式已成功更新！只是没有反映在屏幕上？

不过，我已经尝试了几个使用“color”和“fontFamily”属性的测试用例，它们确实起作用，所以我知道我的下拉菜单或函数没有任何问题。 p>

alignmentChange(alignment) {
  switch(alignment) {
    case "Left": document.getElementById('PhotoBox').style.color = 'yellow';
    case "Centre": document.getElementById('PhotoBox').style.color = 'blue;
  }
}

例如，这个使用颜色的作品。

当我在“PhotoBox.css”中手动将“PhotoBox”的边距属性设置为“0 auto”时，这也有效，所以我知道这不是我的布局的问题 - 将边距设置为“0 auto”在 CSS 文件本身内确实将内容居中。

如果它有帮助的话，我在原始 CSS 文档 PhotoBox.css 中得到了所有信息：

#PhotoBox{
    flex-direction: row;
    flex-wrap: wrap;
}

当我使用颜色或字体系列等测试属性而不是边距时，为什么我的 JS 函数可以正常工作？但是如果我直接在 CSS 文件中更改边距 是否有效？

Answer 1

问题可能来自弹性框。否则它会像下面那样正常工作。

如果元素是 flex 子元素，首先将 fex-grow 或 flex-shrink 设置为 0(no​​ne)。然后再次尝试您的代码。如果这不起作用，请使用 flex-box 属性。如果元素 PhotoBox 是 flex-parent，则使用“justify-content: center | start | end”属性。或者，如果它是一个 flex-child，则使用“justify-self: center | start | end”属性。

element.style.justifyContent = "start" or "center"

你为什么一次又一次地选择元素？只需将其存储在变量中！

const box = document.getElementById("box");

let counter = 0;

box.addEventListener("click", (e) => {
  if(counter++ % 2 == 1)
  box.style.margin = "";
  // you can also use- margin: initial;
  else
  box.style.margin = "0 auto";
});

#box {
  width: 100px;
  height: 50px;
  background-color: red;
}

<div id="box">Click me</div>