Javascript 如何将该元素定位在与另一个元素相同的位置？

点击Hello按钮后，我是新的Hello按钮，将显示在与前一个完全相同的位置。我如何才能做到这一点

const rightDiv=document.querySelector（“#rightDiv”）；
const leftButton=document.querySelector（“#leftButton”）；
函数myFunction（）{
rightDiv.style.display=“无”；
leftButton.style.display=“block”}

你好
你好

如果为

显示

属性指定了

无

，则不会生成任何框。另外，

offsetWidth

，

offsetHeight

属性等。如果没有与元素关联的CSS布局框，则返回

0

9.2.4“显示”属性 此值导致元素不出现在格式化结构中（即，在可视媒体中，元素不生成框，对布局没有影响）。子元素也不会生成任何框；元素及其内容将完全从格式化结构中删除。无法通过在子体上设置

display

属性来覆盖此行为

请注意，显示“无”不会创建不可见的框；它根本不创建任何框。CSS包括使元素能够在格式化结构中生成影响格式化但自身不可见的框的机制。有关详细信息，请参阅“可见性”部分

因此，请使用

可见性

属性而不是

显示

属性。

可见性

属性可用于使元素生成的框不可见并影响布局

11.2可见性：“可见性”属性

可见性

属性指定是否渲染元素生成的框。不可见框仍会影响布局（将

显示

属性设置为“无”以完全抑制框的生成）。值具有以下含义：

• 隐藏 生成的框不可见（完全透明，不绘制任何内容），但仍会影响布局。此外，如果元素的子体具有“可见性：可见”，则它们将可见

Bootstrap 4使用Flexbox进行网格布局，因此您可以使用

order

属性来控制flex项的顺序

网格系统 Bootstrap的网格系统使用一系列容器、行和列来布局和对齐内容。它采用flexbox制造，反应灵敏。下面是一个示例，深入了解网格是如何组合在一起的

从上面可以使用

可见性

和

顺序

属性执行此操作：

const rightDiv=document.querySelector（“#rightDiv”）；
const leftButton=document.querySelector（“#leftButton”）；
函数myFunction（）{
rightDiv.style.visibility=“隐藏”；
leftButton.style.visibility=“可见”；
leftButton.parentElement.style.order=1；
}

你好
你好

您可以给它们完全相同的样式。。。只有“display”属性的不同。这似乎有点奇怪。虽然用另一个按钮替换一个按钮是完全可行的，但你不应该这样做。您可以使用简单的JavaScript逻辑来更改第一次用其他内容单击按钮时发生的情况。没有两个按钮，而是有一个按钮在第一次点击和后续点击时可以做不同的事情。@AndreiGheorghiu是的，但我使用的是侧导航，所以我需要隐藏按钮并显示另一个按钮，它是用户体验设计的一部分谢谢，但我不需要查看可见性，我需要像div那样移动位置消长