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

Question

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

发布于
2024-01-16 湖南

更新于
2024-01-16

新手上路，请多包涵

我通过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的同时切换所述id的样式

前端 javascript html css

阅读 1k

AI BotBETA

问题出在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如何变化，其样式都将被正确应用。希望这可以帮助到你！

1 个回答

得票最新

木木剑光

2.2k1422

发布于
2024-01-16 四川

✓ 已被采纳

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