我可以将id作为数字的div吗?

问题描述 投票:37回答:7

我可以用div作为数字的id吗?

例如<div id="12"></div>

javascript html
7个回答
51
投票

我可以将id作为数字的div吗?

是的你可以。

id值仅由数字are perfectly valid in HTML组成;除了空间之外什么也没关系。虽然早期的HTML规范更具限制性(refref),需要一小组字符并以字母开头,浏览器从不关心,这是HTML5规范开放的重要原因。

如果您打算将这些ids与CSS选择器一起使用(例如,使用CSS设置样式,或者使用querySelectorquerySelectorAll或使用CSS选择器的jQuery等库),请注意它可能会很痛苦,因为you can't use an id starting with a digit in a CSS id selector literally ;你必须逃脱它。 (例如,#12是一个无效的CSS选择器;你必须把它写成#\31\32。)因此,如果你要将它与CSS选择器一起使用,那么用字母启动它会更简单。

为清晰起见,列表中的上述链接:

下面是一个使用divid“12”并用三种方式处理它的例子:

  1. 用CSS
  2. 通过document.getElementById的JavaScript
  3. 使用document.querySelector的JavaScript(在支持它的浏览器上)

它适用于我曾经抛出的每个浏览器(参见代码下面的列表)。实例:

(function() {
  "use strict";

  document.getElementById("12").style.border = "2px solid black";
  if (document.querySelector) {
    document.querySelector("#\\31\\32").style.fontStyle = "italic";
    display("The font style is set using JavaScript with <code>document.querySelector</code>:");
    display("document.querySelector(\"#\\\\31\\\\32\").style.fontStyle = \"italic\";", "pre");
  } else {
    display("(This browser doesn't support <code>document.querySelector</code>, so we couldn't try that.)");
  }

  function display(msg, tag) {
    var elm = document.createElement(tag || 'p');
    elm.innerHTML = String(msg);
    document.body.appendChild(elm);
  }
})();
#\31\32 {
  background: #0bf;
}
pre {
  border: 1px solid #aaa;
  background: #eee;
}
<div id="12">This div is: <code>&lt;div id="12">...&lt;/div></code>
</div>
<p>In the above:</p>
<p>The background is set using CSS:</p>
<pre>#\31\32 {
    background: #0bf;
}</pre>
<p>(31 is the character code for 1 in hex; 32 is the character code for 2 in hex. You introduce those hex character sequences with the backslash, <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">see the CSS spec</a>.)</p>
<p>The border is set from JavaScript using <code>document.getElementById</code>:</p>
<pre>document.getElementById("12").style.border = "2px solid black";</pre>

我从来没有在浏览器中看到上述失败。这是我见过的浏览器的一个子集:

  • Chrome 26,34,39
  • IE6,IE8,IE9,IE10,IE11
  • Firefox 3.6,20,29
  • IE10(手机)
  • Safari iOS 3.1.2,iOS 7
  • Android 2.3.6,4.2
  • Opera 10.62,12.15,20
  • 征服4.7.4

但是又一次:如果你要使用带有元素的CSS选择器,最好用字母开始;像#\31\32这样的选择器非常难以阅读。


5
投票

来自HTML 5 specs ......

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

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

ID可以采取什么形式没有其他限制;特别是,ID可以只包含数字,以数字开头,以下划线开头,只包括标点符号等。

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

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

所以...是的:)

来自HTML 4.01 specs ......

ID必须以字母([A-Za-z])开头,后面可以跟任意数量的字母,数字([0-9]),连字符(“ - ”),下划线(“_”),冒号( “:”)和句号(“。”)。

它。 。 。 :(中


2
投票

从可维护性的角度来看,这是一个坏主意。 ID应至少在某种程度上描述它们代表的内容。用有意义的东西作为前缀,以符合其他人已经回答的内容。例如:

<div id ="phoneNumber_12" > </div>

2
投票

您还可以通过执行以下操作来选择该类型的ID(尽管创建这样一个以数字开头的ID绝对不是最佳做法):

document.querySelector('div[id="12"]'); //or 
document.querySelectorAll('div[id="12"]'); //if you have multiple elements with equal ID.

0
投票

正如其他答复所指出的那样,答案在技术上是:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

但是,实际上,如果您希望文档可以与各种浏览器,CSS编辑器和JavaScript框架一起使用,那么您将受到更多限制。

正如其他回复中所述,jQuery存在包含句点和冒号的id的问题。

一个更微妙的问题是,已知某些浏览器会错误地将id属性值视为区分大小写。这意味着如果你在你的CSS中输入id =“firstName”(小写'f')和你的CSS中的.FirstName {color:red}(大写的'F'),那么一个错误的浏览器将不会设置元素的颜色为红色。由于两个定义都使用有效字符作为id,因此验证工具不会收到任何错误。

您可以通过严格遵守命名约定来避免这些问题。例如,如果您将自己完全限制为小写字符,并且始终使用连字符或下划线分隔单词(但不是两者,请选择一个而不使用另一个),那么您将拥有一个易于记忆的模式。你永远不会怀疑“它是firstName还是FirstName?”因为你总是知道你应该键入first_name。

同样的问题已经问过了

What are valid values for the id attribute in HTML?


0
投票

虽然TJ Crowder的答案在概念上很好,但它对后代CSS选择器不起作用。

只转移第一个字符后跟空格确实有效(如在Chrome 49中)

假设以下HTML片段:

<td id="123456">
 <div class="blah">
  <div class="yadah">play that funky music</div>
 </div>
</td>

以下声明:

document.querySelector("#\\31 23456 .blah .yadah").style.fontStyle = "italic";

正确显示播放时髦的音乐


-3
投票

不,它必须以一封信开头。见http://www.electrictoolbox.com/valid-characters-html-id-attribute/。但是,您可以在第一个字符后使用数字,例如a1theansweris42

© www.soinside.com 2019 - 2024. All rights reserved.