JavaScript修改Div元素ID后样式失效，究竟是样式没生效还是元素位置改变了？

js修改div元素id后样式失效问题解析

在使用JavaScript修改Div元素的ID后发现样式没有随之改变，令人疑惑。让我们深入了解问题的根源并提出解决方案。

在提供的代码示例中，通过JavaScript修改了两个Div元素（"thisfloor"和"thatfloor"）的ID。虽然ID成功改变，但样式仍然不变。

问题的关键在于，这些Div元素使用了绝对定位。当ID交换后，样式确实生效，但由于元素的位置也随ID交换而改变，因此看起来像是样式没有改变。换句话说，元素不仅改变了ID，还改变了位置，导致它们看起来没有被修改。

解决方案：

为了解决此问题，需要确保元素在ID交换后仍保持其原始位置。一种解决方案是通过JavaScript或CSS明确设置元素的位置。

JavaScript解决方案：

function creatFloor() {
  // 获取元素当前位置
  var thisfloorPos = thisfloor.getBoundingClientRect();
  var thatfloorPos = thatfloor.getBoundingClientRect();

  // 交换ID
  thisfloor.id = "thatfloor";
  thatfloor.id = "thisfloor";

  // 设置元素位置
  thisfloor.style.left = thatfloorPos.left + "px";
  thisfloor.style.top = thatfloorPos.top + "px";
  thatfloor.style.left = thisfloorPos.left + "px";
  thatfloor.style.top = thisfloorPos.top + "px";
}

CSS解决方案：

#thisfloor, #thatfloor {
  position: absolute;
  left: 50px;
  top: 500px;
}

采用上述解决方案中的任何一种都可以确保在交换ID后元素保持其原始位置，从而使样式改变可见。

以上就是JavaScript修改Div元素ID后样式失效，究竟是样式没生效还是元素位置改变了？的详细内容，更多请关注其它相关文章！