关于javascript：我可以将id为数字的div设置为数字吗？


can I have a div with id as number?

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

例如

相关讨论

Can I have a div with id as number?

是的你可以。

仅由数字组成的id值在HTML中完全有效；除了空间，其他都没有。而且，尽管早期的HTML规范更具限制性(ref，ref)，只需要少量字符并以字母开头，但浏览器却从不在乎，这是HTML5规范为人开放的重要原因。

如果您打算将这些id与CSS选择器一起使用(例如，使用CSS设置样式，或者使用querySelector，querySelectorAll或使用CSS选择器的jQuery之类的库来查找它们)，请注意可能会很痛苦，因为您不能在字面上直接在CSS id选择器中使用以数字开头的id；你必须逃避它。 (例如，#12是无效的CSS选择器；您必须将其编写为#\31\32。)因此，如果要与CSS选择器一起使用，则以字母开头更简单。

为了清楚起见，以上列表中的那些链接：

  • HTML5-ID属性
  • HTML4-ID属性以及ID和NAME令牌
  • ID的CSS 2.1规则

下面是使用div和id" 12"并通过三种方式处理的示例：

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

    • 它可以在我扔过的所有浏览器上使用(请参见代码下方的列表)。现场示例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    (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 <wyn>document.querySelector</wyn>:");
        display("document.querySelector("#\\\\31\\\\32").style.fontStyle = "italic";","pre");
      } else {
        display("(This browser doesn't support <wyn>document.querySelector</wyn>, so we couldn't try that.)");
      }

      function display(msg, tag) {
        var elm = document.createElement(tag || 'p');
        elm.innerHTML = String(msg);
        document.body.appendChild(elm);
      }
    })();
    1
    2
    3
    4
    5
    6
    7
    #\31\32 {
      background: #0bf;
    }
    pre {
      border: 1px solid #aaa;
      background: #eee;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    This div is: <wyn>...</wyn>

    <p>
    In the above:
    </p>
    <p>
    The background is set using CSS:
    </p>
    [cc lang="javascript"]#\31\32 {
        background: #0bf;
    }

    (31是十六进制1的字符代码； 32是十六进制2的字符代码。您将这些十六进制字符序列加上反斜杠，请参阅CSS规范。)

    使用document.getElementById从JavaScript设置边框：

    1
    document.getElementById("12").style.border ="2px solid black";

    我从未在浏览器中看到以上失败。这是我所见过的一部分浏览器：

    • 铬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
    • Konquerer 4.7.4

    再说一遍：如果要在元素上使用CSS选择器，则最好以字母开头；像#\31\32这样的选择器很难读取。

    相关讨论

    从HTML 5规范...

    The id attribute specifies its element's unique identifier (ID). [DOM]

    The value must be unique amongst all the IDs in the element's home
    subtree and must contain at least one character. The value must not
    contain any space characters.

    There are no other restrictions on what form an ID can take; in
    particular, IDs can consist of just digits, start with a digit, start
    with an underscore, consist of just punctuation, etc.

    An element's unique identifier can be used for a variety of purposes,
    most notably as a way to link to specific parts of a document using
    fragment identifiers, as a way to target an element when scripting,
    and as a way to style a specific element from CSS.

    Identifiers are opaque strings. Particular meanings should not be
    derived from the value of the id attribute.

    所以...是的:)

    从HTML 4.01规范...

    ID 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
    (".").

    所以不行 ：(

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

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

    从可维护性的角度来看，这是一个坏主意。 ID至少应在某种程度上描述它们所代表的含义。给它加上有意义的前缀，使其与其他人已经回答过的东西兼容。例如：

    1
     
    相关讨论

    尽管TJ Crowder的回答在概念上是不错的，但不适用于后代CSS选择器。

    但是，仅转义第一个字符后跟空格确实可以(例如Chrome 49)

    假定以下HTML代码段：

    1
    2
    3
    4
    5
    <td id="123456">
     
      play that funky music
     
    </td>

    以下语句：

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

    正确显示播放那种时髦的音乐

    正如其他答复中指出的那样，答案在技术上是：

    1
    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属性值视为区分大小写。这意味着，如果您在HTML中输入id =" firstName"(小写字母" f")，而在CSS中输入.FirstName {color：red}(大写字母" F")，则有问题的浏览器将不会设置该元素的颜色变为红色。因为两个定义都使用有效字符作为id，所以您不会从验证工具收到任何错误。

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

    已经问过同样的问题

    HTML中id属性的有效值是什么？

    相关讨论

    不，它必须以字母开头。参见http://www.electrictoolbox.com/valid-characters-html-id-attribute/。您可以在第一个字符后使用数字，例如a1或theansweris42。

    相关讨论