javascript - 我通过js修改了div的id属性，但是虽然id确实被改变了，样式却没有改变，这是为什么？

Question

我通过js修改了div的id属性，但是虽然id确实被改变了，但是样式却没有改变，这是为什么？

以下仅展示部分代码。

以下为CSS代码

#thisfloor{            position:fixed;            left:50px;            top:500px;            width:80px;            height:300px;            background-color:dimgray;        }        #thatfloor {            position: fixed;            left: 200px;            top: 500px;            width: 80px;            height: 300px;            background-color: red;        }

以下为HTML代码

<div id="youxiye">  <!--界面-->        <div id="kid"></div>    <!--角色-->        <div id="thisfloor" onclick="creatFloor()"></div>  <!--此次地块-->        <div id="thatfloor"></div>  <!--下次地块-->    </div>

以下为js代码

  //  生成此次地块和下次地块        var thisfloor = document.getElementById("thisfloor")        var thatfloor = document.getElementById("thatfloor")        var numbers = 1;        function creatFloor() {            numbers++;            if (numbers % 2 == 0) {                thisfloor.id = "thatfloor"                thatfloor.id = "thisfloor"            }            else {                thisfloor.id = "thisfloor"                thatfloor.id = "thatfloor"            }            console.log(thisfloor.id)        }

这个是调整前

这个是调整后，虽然id改了，样式却没有变

希望可以在切换id的同时切换所述id的样式

Answer 1

看了下是生效的，但你这里用了绝对定位，id交换后样式生效，元素位置也换了，看起来就像没生效一样

Answer 2

问题出在CSS的选择器上。CSS选择器使用的是元素的ID，而不是元素的内容或属性。在你的代码中，你只是改变了元素的ID，而没有改变元素的内容或属性。因此，CSS选择器仍然匹配到旧的ID。

解决这个问题的方法是使用JavaScript来动态修改CSS样式。你可以使用JavaScript来获取元素的引用，然后直接修改该元素的样式属性。这样，无论元素的ID如何变化，其样式都将被正确应用。

以下是修改后的JavaScript代码：

// 生成此次地块和下次地块var thisfloor = document.getElementById("thisfloor")var thatfloor = document.getElementById("thatfloor")var numbers = 1;function creatFloor() {    numbers++;    if (numbers % 2 == 0) {        // 交换元素的ID和引用        var temp = thisfloor;        thisfloor = thatfloor;        thatfloor = temp;        // 动态修改样式属性        thisfloor.style.backgroundColor = "red";        thatfloor.style.backgroundColor = "dimgray";    }    else {        // 交换元素的ID和引用        var temp = thisfloor;        thisfloor = thatfloor;        thatfloor = temp;        // 动态修改样式属性        thisfloor.style.backgroundColor = "dimgray";        thatfloor.style.backgroundColor = "red";    }    console.log(thisfloor.id)}

通过这种方式，无论元素的ID如何变化，其样式都将被正确应用。希望这可以帮助到你！