Sorawithcat 发表于 2024-1-16 14:16:47

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

我通过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 发表于 2024-1-16 14:17:14

在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 发表于 2024-1-16 14:18:33

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

没有作用

FishC 发表于 2024-1-16 14:18:52

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 小助理，如未能正确解答您的问题，请继续追问。
页: [1]
查看完整版本: 我通过js修改了div的id属性，但是虽然id确实被改变了，样式却没有改变，这是为什么？