1

在我的示例中，我有一个 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 手动更改每个元素的情况下完成此操作？

4

8 回答 8

7

不，你应该使用一个类

#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")
}
于 2013-07-08T20:27:18.500 回答
5

我个人的偏好是使用 jQuery 添加\删除一个类而不是更改 ID。当你想要获得更多效果时，做后者只是在自找麻烦。

类似于以下内容：

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

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

于 2013-07-08T20:24:46.933 回答
2

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

于 2013-07-08T20:26:37.060 回答
2

快速而肮脏的回答：不，更改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");
于 2013-07-08T20:32:21.837 回答
1

我会说更改元素的 id 是“可以的”，但不同意这样做。id 的目的是标识元素。所以改变id应该真的是改变元素。

与其更改 id，不如添加和删除一个类。

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

于 2013-07-08T20:26:08.727 回答
1

您不应该更改“id”属性。

请改用“类”属性。

例如：

<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("class","closed");

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

于 2013-07-08T20:41:45.467 回答
0

您可以更改类而不是 id，并在样式中设置以根据其类显示或隐藏元素。

于 2013-07-08T20:25:52.857 回答
-1

你应该使用类，而不是 id

于 2013-07-08T20:25:05.150 回答