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

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

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

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

解决方案：

立即学习“Java免费学习笔记（深入）”；

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

为了解决此问题，需要确保元素在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后元素保持其原始位置，从而使样式改变可见。