Question

在我的例子中，我有一个id为“foo1Closed”的div。当我点击“foo1Closed”时，我希望在div中更改许多元素（例如高度，宽度，颜色，可见性等）。

我完成此任务的一种方法是为.css文件中的每个元素编写两种样式。例如，“foo1Closed”的一种样式和“foo1Opened”的一种样式。像：

#foo1Closed {
   visibility:hidden;
}
#foo1Opened {
    visibility:visible;
}

然后我使用JavaScript函数来更改这些ID，例如：

document.getElementById("foo1Opened").id = "foo1Closed";

由于我不知道这种方法的潜在缺点，我希望有人可以回答，如果这是一种“好的”方式来实现这种交互性，或者我应该直接通过JavaScript修改样式，如下所示：

document.getElementById("foo1Opened").style.visibility = "hidden";

显然，一个解决方案将有更多的CSS代码，一个将有更多的JavaScript代码。我不知道的是，哪一个更有效（就项目的性能和/或建模而言）。

重新提出的问题：由于ID用于标识特定对象（意味着它们通常不应更改），是否有不同的方法可以在不编辑ID的情况下实现此目的，而且还不依赖于通过JavaScript手动更改每个元素？

Answer 1

不，你应该使用课程

#foo1.closed {
   visibility:hidden;
}
#foo1.opened {
    visibility:visible;
}

document.getElementById("foo1").setAttribute("class","closed");
document.getElementById("foo1").setAttribute("class","opened");

或者您可以在此基础上构建函数（但不要使用我的代码，避免使用全局变量）

... CSS ...

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

var openFoo = function() {
    foo1.setAttribute("class","opened")
}
var closeFoo = function() {
    foo1.setAttribute("class","closed")
}

Answer 2

我个人的偏好是使用jQuery添加\删除类而不是更改ID。当你想要获得更多的效果时，做后者就是在线下问题。

有些事情：

$("#foo1").removeClass("class1").addClass("class2");

或者你想有条件地实现它。

Answer 3

将元素的ID视为不应随时间变化的唯一标识符，而CSS类表示可能随时间变化的元素的描述或元数据。

Answer 4

快速而肮脏的回答：不，更改ID非常糟糕。

ID是元素的标识符。您不应该使用指向元素样式的ID。这样做并不是语义上的，并且会使重构过程变得更难。我知道你刚刚开始使用HTML / JS / CSS，但重要的是要知道：）

出于您在问题中描述的目的，最好的方法是使用课程。例如：

.opened {
   visibility: visible;
}
.closed {
   visibility: hidden;
}

<div id="foo1" class="opened"></div>

然后，在你的JavaScript中......

document.getElementById("foo1").setAttribute("class", "opened");
document.getElementById("foo1").setAttribute("class", "closed");

Answer 5

我会说改变元素的id会“好”但不同意这样做。 id的目的是识别元素。因此，更改id应该真正改变元素。

为什么不添加和删除类，而不是更改id。

从语义的角度来看，您正在更改页面特定部分的属性，因此更改类更有意义。

Answer 6

您不应更改“id”属性。

使用“class”属性。

例如：

<style type='text/css'>
    div.closed {
        display:none;
    }
    div.opened {
        display:inline;
    }

</style>

<div id="foo1" class="opened">...</div>

在您的javascript函数中使用以下内容：

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

    foo1.className="closed";

尽量避免通过这种方式更改类属性：

的document.getElementById（ “foo1”）的setAttribute（ “类”， “关闭”）;

您应该使用DOM元素的 className 属性

Answer 7

你可以改变类而不是id，并在你的样式中设置根据它的类来显示或隐藏元素。

Answer 8

你应该使用类，而不是ids

改变html id是一个好习惯吗？

8 个答案: