修改 DIV id 后，样式为何依旧未发生变化？

为什么修改 DIV id 后，样式依然未改变？

您碰到的问题是，尽管成功修改了 DIV 的 id，但样式却没有随之改变。这是因为您在 CSS 中使用的是绝对定位。

在绝对定位下，元素的位置基于父元素或浏览器窗口的位置，而不是基于文档流。当交换 id 时，元素的位置也会相应地发生变化，这就会导致看起来样式没有生效。

解决方案：

要在切换 id 的同时切换样式，您可以使用以下方法：

• 使用附加类名：添加一个新类，并将其与新 id 关联起来。在 JS 中，您可以使用 classList.add() 方法添加类名。
• 使用内联样式：直接在 HTML 元素中设置样式属性。这将覆盖 CSS 中应用的任何样式。
• 使用 CSS 变量：定义一个 CSS 变量来存储 id，然后在其他样式规则中引用它。当 id 发生变化时，所有引用该变量的规则也会相应地更新。

例如：

使用附加类名：

.active {
  background-color: red;
}

// JS
element.classList.add("active");

使用内联样式：

<div id="thisfloor" style="background-color: dimgray;"></div>

使用 CSS 变量：

:root {
  --my-id: "thisfloor";
}

#thisfloor {
  background-color: dimgray;
}

#thatfloor {
  background-color: red;
}

// JS
document.documentElement.style.setProperty("--my-id", "thatfloor");