为什么动态修改div的id属性后样式看起来没有生效？-html教程-PHP中文网

为什么动态修改div的id属性后样式看起来没有生效？

DDD

发布： 2025-03-31 20:46:15

原创

966人浏览过

动态修改div的id属性后样式未生效的问题

在使用javascript动态修改html元素的id属性时，你可能会遇到这样的情况：虽然id属性确实被更改了，但对应的css样式却没有如预期那样随之改变。本文将围绕这个问题，结合具体的代码示例进行详细分析和解答。

首先，我们来看一下相关的代码片段：

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>

登录后复制

JavaScript代码：

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);
}

登录后复制

从上述代码可以看出，JavaScript函数creatFloor会动态地交换两个div元素的id属性。我们期望在id属性交换后，相应的CSS样式也能随之变化。然而，实际情况是，虽然id属性确实被交换了，但CSS样式似乎没有发生变化。

为了解这个问题，让我们仔细分析一下实际效果：

调整前：

为什么动态修改div的id属性后样式看起来没有生效？