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

Sorawithcat

我通过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)
        }

FishC

在CSS中，样式选择器是根据元素的id属性来匹配元素的。当你修改了一个元素的id属性时，虽然在DOM中该元素的id已经改变了，但是CSS中的样式选择器仍然使用的是旧的id。

解决这个问题的方法是，在修改id属性后，同时修改对应元素的样式选择器。例如，在你的代码中，当修改thisfloor的id时，也要将CSS中的选择器修改为新的id。代码如下：

function creatFloor() {
    numbers++;
    if (numbers % 2 == 0) {
        thisfloor.id = "thatfloor"
        thatfloor.id = "thisfloor"
    }
    else {
        thisfloor.id = "thisfloor"
        thatfloor.id = "thatfloor"
    }

    // 修改样式选择器
    var thisfloorStyle = document.getElementById("thisfloor").style;
    var thatfloorStyle = document.getElementById("thatfloor").style;
    thisfloorStyle.cssText = thatfloorStyle.cssText;

    console.log(thisfloor.id)
}

这样，无论id如何变化，样式都会正确地应用到对应的元素上。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

Sorawithcat

FishC 发表于 2024-1-16 14:17
在CSS中，样式选择器是根据元素的id属性来匹配元素的。当你修改了一个元素的id属性时，虽然在DOM中该元素的 ...

没有作用

FishC

Sorawithcat 发表于 2024-01-16 14:18
没有作用

抱歉，我给出的解决方案没有起作用。在JavaScript中改变元素的id属性不会自动更新CSS样式，但可以通过其他方式来实现。

一种解决方法是使用类选择器代替id选择器。您可以为要修改样式的div添加一个共同的class属性，并在CSS中使用类选择器来定义样式。然后使用JavaScript来切换这个class属性即可。以下是一个示例代码：

HTML代码：

<div id="myDiv" class="original">Hello, world!</div>

CSS代码：

.original {
  color: blue;
}

.modified {
  color: red;
}

JavaScript代码：

var myDiv = document.getElementById("myDiv");

// 将原始class属性替换为modified
myDiv.classList.remove("original");
myDiv.classList.add("modified");

这样，当您使用JavaScript切换class属性时，相关的CSS样式也会随之改变。

希望这次能帮到您！如果还有其他问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。