一个 html5 文档可以有两个 ID 吗?



我想知道一个html5元素是否可以有两个id,像这样:

<button id="thing1" id="thing2" name="Button1" onclick="change()">Click here</button>

或者这个:

<button id="thing1, thing2" name="Button1" onclick="change()">Click here</button>

另外,如果其中一个 ID 说了一件事,而另一个 ID 说了另一件事,那么将使用哪一个?

TL;唐:没有。


在所有版本的 HTML 中,每个元素只能有一个 id。 请参阅规格

id 属性指定其元素的唯一标识符 (ID)。[多姆]

该值在元素的主子树中的所有 ID 中必须是唯一的,并且必须至少包含一个字符。该值不得包含任何空格字符。

注意:对于ID可以采用的形式没有其他限制;特别是,ID可以仅由数字组成,以数字开头,以下划线开头,仅由标点符号组成等。

注意:元素的唯一标识符可用于多种用途,最明显的是作为使用片段标识符链接到文档特定部分的一种方式,作为在编写脚本时定位元素的一种方式,以及作为从 CSS 设置特定元素样式的一种方式。

标识符是不透明的字符串。不应从 id 属性的值派生特定含义。

在您给出的示例中,解析器将仅读取第一个 id。如果您尝试过此操作:

<button id="thing1,thing2" name="Button1" onclick="change()">Click here</button>

(id中没有空格),您仍然只有一个 ID,其中包括逗号:thing1,thing2


注意:没有理由需要两个不适合使用class或以其他方式存储数据的id值。 例如,在 jQuery 中,您可以执行$('#some_id').data('foo', 'bar');将名为foo的数据与值bar保存,并将其与 idsome_id的元素相关联。无论如何,类和数据存储通常比 id 灵活得多。

编辑:请记住,类不仅适用于CSS。您可以执行<button id="thing1" class="thing2 thing3 thing42"...>并使用javascript(普通或使用jQuery等库)通过一个或多个类访问按钮。类名对于项目可以是唯一的,不必在其他地方使用或在 CSS 文件中提及。

这里有一个jsFiddle示例的链接,说明类和ids一起使用时有多强大。

简短回答:

您应该改用class-属性。

最新更新