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

Sorawithcat

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

1. #thisfloor{
   
2.             position:fixed;
   
3.             left:50px;
   
4.             top:500px;
   
5.             width:80px;
   
6.             height:300px;
   
7.             background-color:dimgray;
   
8.         }
   
9. 
   
10.         #thatfloor {
    
11.             position: fixed;
    
12.             left: 200px;
    
13.             top: 500px;
    
14.             width: 80px;
    
15.             height: 300px;
    
16.             background-color: red;
    
17.         }

复制代码

HTML

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

复制代码

js

1.   //  生成此次地块和下次地块
   
2.         var thisfloor = document.getElementById("thisfloor")
   
3.         var thatfloor = document.getElementById("thatfloor")
   
4.         var numbers = 1;
   
5. 
   
6.         function creatFloor() {
   
7.             numbers++;
   
8.             if (numbers % 2 == 0) {
   
9.                 thisfloor.id = "thatfloor"
   
10.                 thatfloor.id = "thisfloor"
    
11.             }
    
12.             else {
    
13.                 thisfloor.id = "thisfloor"
    
14.                 thatfloor.id = "thatfloor"
    
15.             }
    
16.             console.log(thisfloor.id)
    
17.         }

复制代码

FishC

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

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

1. function creatFloor() {
   
2.     numbers++;
   
3.     if (numbers % 2 == 0) {
   
4.         thisfloor.id = "thatfloor"
   
5.         thatfloor.id = "thisfloor"
   
6.     }
   
7.     else {
   
8.         thisfloor.id = "thisfloor"
   
9.         thatfloor.id = "thatfloor"
   
10.     }
    
11. 
    
12.     // 修改样式选择器
    
13.     var thisfloorStyle = document.getElementById("thisfloor").style;
    
14.     var thatfloorStyle = document.getElementById("thatfloor").style;
    
15.     thisfloorStyle.cssText = thatfloorStyle.cssText;
    
16. 
    
17.     console.log(thisfloor.id)
    
18. }

复制代码

这样，无论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代码：

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

复制代码

CSS代码：

1. .original {
   
2.   color: blue;
   
3. }
   
4. 
   
5. .modified {
   
6.   color: red;
   
7. }

复制代码

JavaScript代码：

1. var myDiv = document.getElementById("myDiv");
   
2. 
   
3. // 将原始class属性替换为modified
   
4. myDiv.classList.remove("original");
   
5. myDiv.classList.add("modified");

复制代码

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

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

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